react重点

React 及其生态的核心知识体系梳理，从 React 基础到进阶特性，再到主流生态工具，覆盖 90%+ 日常开发场景：

项目汇总

code/all/pc-ysy next.js react17
code/all/growth-file-print react19

一、React 核心基础（必学根基）

1. JSX 语法

• 本质是 React.createElement() 的语法糖，用于描述 UI；
• 支持 JavaScript 表达式嵌入（{}）；
• className 替代 class，htmlFor 替代 for；
• 必须有一个根元素，可用 <></>（Fragment）简写。

  const name = 'React';
  const element = <h1>Hello, {name}!</h1>;

2. 组件定义

• 函数组件（主流）：简洁、Hooks 友好，推荐首选；
• 类组件：传统写法，需掌握生命周期，用于老项目维护。

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

3. Props & State

• Props：父组件传入的只读数据，用于组件通信；
• State：组件内部可变状态，用 useState（函数组件）或 this.state（类组件）管理；
• 状态更新是异步的，需通过 setState/setXxx 更新，不可直接修改。

4. 事件处理

• 事件名小驼峰（onClick 而非 onclick）；
• 函数组件直接传函数，类组件需注意 this 绑定（推荐箭头函数）。

  function Button() {
    const handleClick = () => console.log('Clicked!');
    return <button onClick={handleClick}>Click</button>;
  }

5. 条件渲染 & 列表渲染

• 条件渲染：if/else、三元运算符、&& 短路运算；
• 列表渲染：map 遍历，必须加唯一 key（避免用索引）。

  // 条件渲染
  {isLoggedIn ? <UserPanel /> : <Login />}
  
  // 列表渲染
  {list.map(item => <Item key={item.id} data={item} />)}

二、React 核心特性（进阶必备）

1. 虚拟 DOM & Diff 算法

• 虚拟 DOM：内存中的 JavaScript 对象，描述真实 DOM 结构；
• Diff 算法：对比新旧虚拟 DOM，最小化更新真实 DOM（同层比较、key 优化），保证性能。

2. 组件生命周期（类组件）

• 挂载阶段：constructor → render → componentDidMount（发请求、初始化）；
• 更新阶段：render → componentDidUpdate（props/state 变化后处理）；
• 卸载阶段：componentWillUnmount（清理定时器、取消订阅）。

3. React Hooks（函数组件核心）

Hooks 让函数组件拥有状态和生命周期，是现代 React 的核心：

Hook	作用	用法示例
useState	管理组件状态	const [count, setCount] = useState(0);
useEffect	处理副作用（发请求、订阅、DOM操作）	useEffect(() => { fetchData(); }, [dependency]);
useContext	消费 Context，跨层级传值	const theme = useContext(ThemeContext);
useReducer	复杂状态管理（替代 Redux 轻量场景）	const [state, dispatch] = useReducer(reducer, initialState);
useCallback	缓存函数，避免子组件不必要重渲染	const handleClick = useCallback(() => {}, [dep]);
useMemo	缓存计算结果，优化性能	const memoizedValue = useMemo(() => compute(a, b), [a, b]);
useRef	保存 DOM 引用或可变值（更新不触发重渲染）	const inputRef = useRef(null); inputRef.current.focus();
useLayoutEffect	同步执行副作用（在 DOM 更新后、浏览器绘制前）	用于需要同步获取 DOM 尺寸的场景

4. Context API

• 用于跨层级组件通信，避免 props 层层传递；
• 核心：createContext → Provider 提供值 → useContext 消费值。

  const ThemeContext = createContext('light');
  
  function App() {
    return (
      <ThemeContext.Provider value="dark">
        <Child />
      </ThemeContext.Provider>
    );
  }
  
  function Child() {
    const theme = useContext(ThemeContext); // 'dark'
    return <div>Theme: {theme}</div>;
  }

三、React 生态系统（主流工具链）

1. 路由：React Router v6

• 单页应用（SPA）路由核心库，v6 是当前主流版本；
• 核心组件：BrowserRouter、Routes、Route、Link、NavLink；
• 核心 Hooks：useNavigate（编程式导航）、useParams（获取动态参数）、useLocation（获取当前路由信息）。

  import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom';
  
  function App() {
    return (
      <BrowserRouter>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/user/:id" element={<User />} /> {/* 动态路由 */}
        </Routes>
      </BrowserRouter>
    );
  }
  
  function User() {
    const { id } = useParams(); // 获取动态参数 id
    const navigate = useNavigate();
    return <button onClick={() => navigate('/')}>Go Home</button>;
  }

2. 状态管理

（1）Redux + React-Redux + Redux Toolkit（RTK）

• 企业级全局状态管理标准方案，RTK 是官方推荐的简化工具包；
• 核心概念：Store（单一数据源）、Action（描述动作）、Reducer（纯函数更新状态）、Dispatch（触发 Action）；
• React-Redux Hooks：useSelector（获取状态）、useDispatch（触发更新）。

  // RTK 简化写法
  import { createSlice, configureStore } from '@reduxjs/toolkit';
  import { useSelector, useDispatch } from 'react-redux';
  
  // 1. 创建 Slice（自动生成 Action 和 Reducer）
  const counterSlice = createSlice({
    name: 'counter',
    initialState: { value: 0 },
    reducers: {
      increment: state => { state.value += 1; },
      decrement: state => { state.value -= 1; }
    }
  });
  
  // 2. 配置 Store
  const store = configureStore({ reducer: { counter: counterSlice.reducer } });
  
  // 3. 组件中使用
  function Counter() {
    const count = useSelector(state => state.counter.value);
    const dispatch = useDispatch();
    return (
      <div>
        <span>{count}</span>
        <button onClick={() => dispatch(counterSlice.actions.increment())}>+</button>
      </div>
    );
  }

（2）Zustand（轻量级首选）

• 极简、高性能的全局状态管理，无需 Provider，适合中小项目；
• API 极其简洁，几行代码即可实现全局状态。

  import { create } from 'zustand';
  
  const useStore = create(set => ({
    count: 0,
    increment: () => set(state => ({ count: state.count + 1 }))
  }));
  
  function Counter() {
    const count = useStore(state => state.count);
    const increment = useStore(state => state.increment);
    return <button onClick={increment}>{count}</button>;
  }

（3）其他状态管理

• Jotai：原子化状态管理，更灵活的细粒度状态控制；
• MobX：响应式状态管理，适合喜欢“可变数据”的场景。

3. 服务端状态管理：React Query（TanStack Query）

• 专门处理服务端数据的获取、缓存、同步、更新，替代传统的 useEffect + useState 发请求；
• 核心 Hooks：useQuery（获取数据）、useMutation（修改数据）、useQueryClient（手动管理缓存）。

  import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
  
  // 获取数据
  function UserList() {
    const { data, isLoading, error } = useQuery({
      queryKey: ['users'], // 缓存 key
      queryFn: () => fetch('/api/users').then(res => res.json()) // 发请求
    });
    if (isLoading) return 'Loading...';
    return <div>{data.map(user => <div key={user.id}>{user.name}</div>)}</div>;
  }
  
  // 修改数据
  function AddUser() {
    const queryClient = useQueryClient();
    const mutation = useMutation({
      mutationFn: (newUser) => fetch('/api/users', { method: 'POST', body: JSON.stringify(newUser) }),
      onSuccess: () => queryClient.invalidateQueries(['users']) // 成功后刷新缓存
    });
    return <button onClick={() => mutation.mutate({ name: 'New' })}>Add User</button>;
  }

4. UI 组件库

• Ant Design（AntD）：国内最常用的企业级组件库，功能全、文档好、主题定制方便；
• Material-UI（MUI）：基于 Material Design，国际化优秀，组件灵活；
• Ant Design Mobile：移动端 React 组件库；
• ShadCN UI：近年流行的“复制粘贴”式组件库，高度可定制。

5. 构建工具

• Vite：现代前端构建工具，启动快、热更新快，推荐替代 Create React App（CRA）；
• Next.js：React 官方推荐的全栈框架，集成 SSR/SSG、路由、构建，生产级首选。

6. 表单处理

• React Hook Form：高性能表单库，基于 Hooks，验证简单，减少不必要重渲染；
• Formik：老牌表单库，和 Yup（验证库）配合使用，功能全面。

7. 测试

• Jest：JavaScript 测试运行器，React 官方推荐；
• React Testing Library：组件测试库，专注于用户行为，避免测试实现细节；
• Vitest：基于 Vite 的测试工具，速度更快，兼容 Jest API。

四、React 进阶知识（性能优化 & 高级特性）

1. 性能优化

• React.memo：缓存组件，仅 props 变化时重渲染（用于纯组件）；
• useCallback/useMemo：缓存函数/计算结果，避免子组件重渲染；
• 虚拟列表：react-window/react-virtualized，只渲染可视区域的列表项，优化长列表性能；
• 代码分割：React.lazy + Suspense，按需加载组件，减少首屏包体积。

  // React.memo 示例
  const MemoizedChild = React.memo(function Child({ data }) {
    return <div>{data}</div>;
  });
  
  // 代码分割示例
  const LazyComponent = React.lazy(() => import('./LazyComponent'));
  function App() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    );
  }

2. 高级特性

• 错误边界（Error Boundaries）：捕获子组件渲染错误，避免整个应用崩溃（仅类组件支持）；
• 高阶组件（HOC）：函数接收组件，返回增强组件（用于复用逻辑，如权限控制）；
• Render Props：通过函数 props 共享逻辑（Hooks 流行后使用减少）；
• Portals：将组件渲染到 DOM 树的任意位置（用于弹窗、抽屉）。

五、路径建议

1. 基础：JSX → 组件 → Props/State → 事件 → 条件/列表渲染；
2. 核心：Hooks（重点 useState/useEffect/useContext）→ Context API → 虚拟 DOM；
3. 生态：React Router → React Query → Zustand/Redux Toolkit → Ant Design → Vite；
4. 进阶：性能优化 → Next.js → 测试 → TypeScript + React。