React 学习指南

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。它采用组件化思想，让前端开发更加高效和可维护。

🚀 快速开始

创建 React 项目


# 使用 Create React App
npx create-react-app my-app
 
# 使用 Vite (推荐)
npm create vite@latest my-app -- --template react
 
# 使用 Next.js
npx create-next-app@latest my-app

📚 核心概念

JSX 语法

JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码：


const element = (
  <div className="container">
    <h1>Hello, React!</h1>
    <p>Welcome to the world of React</p>
  </div>
);

组件基础

React 组件分为函数组件和类组件：


// 函数组件 (推荐)
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
 
// 类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

⚡ React Hooks

Hooks 是 React 16.8 引入的新特性，让函数组件也能使用状态和其他 React 特性。

useState - 状态管理


import { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

useEffect - 副作用处理


import { useEffect, useState } from 'react';
 
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    // 组件挂载时获取用户数据
    fetchUser(userId).then(setUser);
    
    // 清理函数
    return () => {
      // 组件卸载时清理
    };
  }, [userId]); // 依赖数组
  
  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

useContext - 上下文


import { createContext, useContext } from 'react';
 
const ThemeContext = createContext();
 
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
    </ThemeContext.Provider>
  );
}
 
function Header() {
  const theme = useContext(ThemeContext);
  return <header className={theme}>Header</header>;
}

🎯 常用 Hooks

Hook	用途	示例
`useState`	状态管理	`const [state, setState] = useState(initial)`
`useEffect`	副作用处理	`useEffect(() => {}, [deps])`
`useContext`	上下文消费	`const value = useContext(MyContext)`
`useReducer`	复杂状态逻辑	`const [state, dispatch] = useReducer(reducer, initial)`
`useMemo`	值记忆化	`const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])`
`useCallback`	函数记忆化	`const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b])`

🔧 性能优化

React.memo


import { memo } from 'react';
 
const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
  // 只有当 props 改变时才重新渲染
  return <div>{/* 复杂渲染逻辑 */}</div>;
});

useMemo 和 useCallback


import { useMemo, useCallback } from 'react';
 
function ParentComponent({ items }) {
  // 记忆化计算结果
  const expensiveValue = useMemo(() => {
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]);
  
  // 记忆化回调函数
  const handleClick = useCallback((id) => {
    console.log('Clicked:', id);
  }, []);
  
  return (
    <div>
      <p>Total: {expensiveValue}</p>
      <ChildComponent onItemClick={handleClick} />
    </div>
  );
}

📦 状态管理

Context API (内置)


import { createContext, useContext, useReducer } from 'react';
 
const AppContext = createContext();
 
const initialState = { user: null, theme: 'light' };
 
function appReducer(state, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'SET_THEME':
      return { ...state, theme: action.payload };
    default:
      return state;
  }
}
 
function AppProvider({ children }) {
  const [state, dispatch] = useReducer(appReducer, initialState);
  
  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
}
 
function useApp() {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useApp must be used within AppProvider');
  }
  return context;
}

第三方状态管理

Redux Toolkit: 官方推荐的状态管理方案
Zustand: 轻量级状态管理
Jotai: 原子化状态管理
Recoil: Facebook 开发的状态管理库

🛠️ 实用工具和库

路由管理


npm install react-router-dom


import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

样式解决方案

Styled Components: CSS-in-JS
Emotion: 高性能 CSS-in-JS
Tailwind CSS: 实用优先的 CSS 框架
CSS Modules: 局部作用域 CSS

测试


npm install @testing-library/react @testing-library/jest-dom


import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';
 
test('increments counter', () => {
  render(<Counter />);
  
  const button = screen.getByText('Increment');
  const count = screen.getByText(/Count:/);
  
  fireEvent.click(button);
  
  expect(count).toHaveTextContent('Count: 1');
});

React 学习指南

🚀 快速开始

创建 React 项目

📚 核心概念

JSX 语法

组件基础

⚡ React Hooks

useState - 状态管理

useEffect - 副作用处理

useContext - 上下文

🎯 常用 Hooks

🔧 性能优化

React.memo

useMemo 和 useCallback

📦 状态管理

Context API (内置)

第三方状态管理

🛠️ 实用工具和库

路由管理

样式解决方案

测试

📖 学习资源

官方文档

🔍 调试工具