React

React

React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 开发并维护，是目前最流行的前端框架之一。

核心概念

组件化开发

React 采用组件化的开发方式，将 UI 拆分为独立、可复用的代码片段。

// 函数组件
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

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

JSX 语法

JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的结构。

const element = (
  <div className="container">
    <h1>Hello World</h1>
    <p>Welcome to React</p>
  </div>
);

虚拟 DOM

React 使用虚拟 DOM 来优化性能。当状态变化时，React 会：

1. 创建新的虚拟 DOM 树
2. 与旧的虚拟 DOM 进行比对（Diff 算法）
3. 只更新实际需要改变的 DOM 节点

Hooks

React 16.8 引入的 Hooks 让函数组件拥有状态和其他 React 特性。

useState - 状态管理

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect - 副作用处理

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 组件挂载时获取数据
    async function fetchUser() {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();

    // 清理函数（组件卸载时执行）
    return () => {
      console.log('Cleanup');
    };
  }, [userId]); // 依赖数组

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

常用 Hooks

Hook	用途
useState	管理状态
useEffect	处理副作用
useContext	访问 Context
useRef	获取 DOM 引用或保存可变值
useMemo	缓存计算结果
useCallback	缓存函数引用
useReducer	复杂状态管理

组件通信

Props 传递

// 父组件
function Parent() {
  const [message, setMessage] = useState('Hello');

  return (
    <Child
      message={message}
      onUpdate={setMessage}
    />
  );
}

// 子组件
function Child({ message, onUpdate }) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => onUpdate('Updated!')}>
        Update
      </button>
    </div>
  );
}

Context 跨层级传递

import { createContext, useContext, useState } from 'react';

// 创建 Context
const ThemeContext = createContext(null);

// Provider 组件
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 使用 Context
function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={toggleTheme}
      style={{
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#333' : '#fff'
      }}
    >
      Current theme: {theme}
    </button>
  );
}

条件渲染

function Greeting({ isLoggedIn, user }) {
  // if 语句
  if (!isLoggedIn) {
    return <LoginButton />;
  }

  // 三元运算符
  return (
    <div>
      {user ? <h1>Welcome back, {user.name}!</h1> : <h1>Welcome!</h1>}
    </div>
  );
}

// 逻辑与运算符
function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <p>You have {unreadMessages.length} unread messages.</p>
      )}
    </div>
  );
}

列表渲染

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => toggleTodo(todo.id)}
          />
          <span style={{
            textDecoration: todo.completed ? 'line-through' : 'none'
          }}>
            {todo.text}
          </span>
        </li>
      ))}
    </ul>
  );
}

快速开始

创建新项目

# 使用 Create React App
npx create-react-app my-app

# 或使用 Vite（推荐）
npm create vite@latest my-app -- --template react

# 进入项目
cd my-app
npm install
npm run dev

第一个组件

src/App.jsx

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1>Hello React</h1>
      <div className="card">
        <button onClick={() => setCount(count + 1)}>
          Count is {count}
        </button>
      </div>
    </div>
  );
}

export default App;

生态系统

工具/库	用途
Next.js	全栈 React 框架
React Router	客户端路由
Redux / Zustand	状态管理
React Query / SWR	数据获取
Styled Components / Tailwind	样式方案
Jest / React Testing Library	测试

最佳实践

1. 组件保持小而专注 - 单一职责原则
2. 使用函数组件和 Hooks - 现代 React 推荐方式
3. 合理使用 useMemo/useCallback - 避免过度优化
4. 使用 TypeScript - 更好的类型安全
5. 遵循 React 命名规范 - 组件大写，Hooks 以 use 开头

学习资源

• React 官方文档
• React 中文文档
• Next.js 文档
• Redux 文档