React 学习指南

基础入门

什么是 React

React 是用于构建用户界面的 JavaScript 库，由 Facebook 开发。核心特点：

组件化：UI 拆分为独立、可复用的组件
声明式：描述 UI 应该是什么样，React 负责更新
虚拟 DOM：高效更新真实 DOM

创建第一个应用

npx create-react-app my-app
cd my-app
yarn start

JSX 语法

// JSX 是 JavaScript 的语法扩展
const element = <h1>Hello, React!</h1>;

// 可以嵌入表达式
const name = 'John';
const greeting = <h1>Hello, {name}!</h1>;

// 可以使用属性
const link = <a href="https://react.dev">React 官网</a>;

// className 代替 class
const box = <div className="container">内容</div>;

// style 使用对象
const styled = <div style={{ color: 'red', fontSize: 20 }}>文本</div>;

组件基础

// 函数组件（推荐）
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 使用组件
function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

Props（属性）

// 传递 props
function UserCard({ name, age, avatar }) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <p>年龄: {age}</p>
    </div>
  );
}

// 使用
<UserCard name="张三" age={25} avatar="/avatar.jpg" />

// props.children
function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <h1>标题</h1>
  <p>内容</p>
</Card>

State（状态）

import { useState } from 'react';

function Counter() {
  // 声明状态
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>重置</button>
    </div>
  );
}

事件处理

function Form() {
  const [text, setText] = useState('');

  const handleChange = (e) => {
    setText(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('提交: ' + text);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={text} onChange={handleChange} />
      <button type="submit">提交</button>
    </form>
  );
}

条件渲染

function Greeting({ isLoggedIn }) {
  // if-else
  if (isLoggedIn) {
    return <h1>欢迎回来!</h1>;
  }
  return <h1>请先登录</h1>;
}

// 三元运算符
function Status({ isOnline }) {
  return (
    <div>
      用户状态: {isOnline ? '在线' : '离线'}
    </div>
  );
}

// && 运算符
function Notification({ hasNew }) {
  return (
    <div>
      {hasNew && <span className="badge">新消息</span>}
    </div>
  );
}

列表渲染

function TodoList() {
  const todos = [
    { id: 1, text: '学习 React', done: false },
    { id: 2, text: '写代码', done: true },
    { id: 3, text: '休息', done: false }
  ];

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <input type="checkbox" checked={todo.done} />
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

表单处理

function LoginForm() {
  const [form, setForm] = useState({
    username: '',
    password: ''
  });

  const handleChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('登录信息:', form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="username"
        value={form.username}
        onChange={handleChange}
        placeholder="用户名"
      />
      <input
        name="password"
        type="password"
        value={form.password}
        onChange={handleChange}
        placeholder="密码"
      />
      <button type="submit">登录</button>
    </form>
  );
}

进阶学习路径

Hooks 基础 → useState、useEffect
Hooks 进阶 → useCallback、useMemo、自定义 Hooks
组件设计模式 → 复合组件、HOC、Render Props
状态管理 → Context API、Redux、Zustand
性能优化 → React.memo、虚拟列表、代码分割
TypeScript → 类型安全开发
测试 → 单元测试、E2E 测试
SSR → Next.js 服务端渲染