FE-09-React 高级：Hooks 原理、并发渲染、Server Components

字数统计: 2.6k字   |   阅读时长≈ 13分

FE-09-React 高级：Hooks 原理、并发渲染、Server Components

本节目标：理解 React Hooks 的底层原理（链表、闭包）、Concurrent Mode、Server Components，掌握 React 19 新特性。

1. React 思维模型

核心思想：

  • 声明式 UI：描述”是什么”而不是”怎么改”
  • 组件化：UI = 组件树
  • 单向数据流：props down, events up
  • 虚拟 DOM：JS 对象描述 UI，diff 后最小化更新真实 DOM
1
2
3
4
5
6
7
8
9
10
function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

2. Hooks 规则与原理

2.1 Hooks 的两条铁律

  1. 只在最顶层调用（不要在循环/条件/嵌套函数里）
  2. 只在 React 函数里调用（组件函数或其他 Hook）

2.2 为什么？

React 内部用链表存储每个组件的 Hooks：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 简化源码
const hooks = [];      // 组件的 hooks 链表
let hookIndex = 0;     // 当前 hook 位置

function useState(initial) {
  const hook = hooks[hookIndex] || { state: initial, queue: [] };
  hookIndex++;

  hook.queue.forEach(action => {
    hook.state = typeof action === 'function' ? action(hook.state) : action;
  });
  hook.queue = [];

  const setState = (action) => {
    hook.queue.push(action);
    triggerUpdate();  // 触发 React 重新渲染
  };

  hooks[hookIndex - 1] = hook;
  return [hook.state, setState];
}

function Counter() {
  const [count, setCount] = useState(0);  // hookIndex 0
  const [name, setName] = useState('A');  // hookIndex 1
  // ...
}

如果在条件里调用 Hook：

1
2
3
4
5
6
7
8
function Counter({ cond }) {
  const [count, setCount] = useState(0);  // hookIndex 0
  if (cond) {
    const [name, setName] = useState('A');  // hookIndex 1（有时）
  }
  const [flag, setFlag] = useState(false);  // hookIndex 1 or 2
  // ← 两次渲染 hookIndex 错位，state 串了！
}

所以 ESLint 插件 eslint-plugin-react-hooks 会强制要求 Hooks 顺序稳定。

3. 核心 Hooks 深入

3.1 useState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: 'Alice', age: 25 });

// 函数式更新（推荐）
setCount(c => c + 1);
setUser(u => ({ ...u, age: u.age + 1 }));

// 惰性初始化
const [data, setData] = useState(() => expensiveCompute());

// 批量更新（在 React 18+ 自动批处理）
const handleClick = () => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 只触发一次 re-render
};

3.2 useEffect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
useEffect(() => {
  // 副作用
  const sub = api.subscribe(handleMessage);
  return () => sub.unsubscribe();  // 清理函数
}, [count]);  // 依赖项

// 空依赖：只在 mount/unmount 执行
useEffect(() => {
  console.log('mounted');
  return () => console.log('unmounted');
}, []);

// 无依赖：每次 render 都执行（罕见）
useEffect(() => {
  console.log('every render');
});

执行时机：

  1. 组件挂载后
  2. 依赖项变化后，先清理再执行
  3. 组件卸载前清理

3.3 useLayoutEffect

同步版本，在 DOM 更新后、浏览器绘制前执行：

1
2
3
4
5
6
7
8
9
useLayoutEffect(() => {
  // DOM 已更新，但浏览器还没绘制
  // 适合读 DOM 并同步修改（避免闪烁）
  ref.current.style.opacity = '0';
  // 强制 reflow
  ref.current.offsetHeight;
  ref.current.style.transition = 'opacity 0.3s';
  ref.current.style.opacity = '1';
}, []);

对比：

  • useEffect：异步，浏览器已绘制
  • useLayoutEffect：同步，浏览器未绘制
  • 99% 用 useEffect，DOM 测量/同步修改用 useLayoutEffect

3.4 useMemo / useCallback

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// useMemo：缓存计算结果
const sorted = useMemo(() => {
  return items.sort((a, b) => a.price - b.price);
}, [items]);

// useCallback：缓存函数引用
const handleClick = useCallback((id) => {
  setSelected(id);
}, []);

// 何时用？
// ✓ 传给依赖 React.memo 的子组件
// ✓ 传给 useEffect/useMemo 作为依赖
// ✗ 不要为了"优化"乱用（hook 本身有开销）

经验法则：先不优化，profile 后再决定。

3.5 useRef

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const ref = useRef(null);
// ref.current 指向 DOM 节点
// 改变 ref.current 不会触发 re-render

// 三种用途：
// 1. 访问 DOM
<input ref={inputRef} />

// 2. 保存"不参与渲染的可变值"
const timerRef = useRef(null);
timerRef.current = setInterval(...);

// 3. 回调 ref（更灵活）
const measuredRef = useCallback((node) => {
  if (node) {
    const { width, height } = node.getBoundingClientRect();
    setSize({ width, height });
  }
}, []);

3.6 useReducer

1
2
3
4
5
6
7
8
9
10
11
12
13
const initial = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'reset': return initial;
  }
}

const [state, dispatch] = useReducer(reducer, initial);

<button onClick={() => dispatch({ type: 'increment' })}>+</button>

何时用 useReducer：

  • 状态逻辑复杂（多个子值相互依赖）
  • 下一状态取决于前状态
  • 想集中管理 action 类型

3.7 useContext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>...</div>;
}

注意：context 变化会导致所有消费者 re-render，大型应用慎用。

3.8 自定义 Hook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// useLocalStorage.ts
function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

// 用法
const [theme, setTheme] = useLocalStorage('theme', 'light');

4. 性能优化

4.1 React.memo

浅比较 props，没变就不重渲染：

1
2
3
const Button = React.memo(function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
});

配合 useCallback / useMemo：

1
2
3
4
5
6
7
8
9
function Parent() {
  const [count, setCount] = useState(0);

  // 没 useCallback：每次 Parent render，handleClick 都是新引用
  //   → Button 的 props 变化 → Button 也 render
  const handleClick = useCallback(() => console.log('clicked'), []);

  return <Button onClick={handleClick} />;
}

4.2 列表 key

1
2
3
4
5
6
7
8
// ✓ 稳定的、唯一的 key
{items.map(item => <Item key={item.id} {...item} />)}

// ✗ 用 index（增删时会错位）
{items.map((item, i) => <Item key={i} {...item} />)}

// ✗ 随机数（每次 render 都变）
{items.map(item => <Item key={Math.random()} {...item} />)}

4.3 状态提升 vs 下放

1
2
3
4
5
6
7
8
9
10
// ✓ 状态尽量下放
function App() {
  return (
    <>
      <Header />        {/* 不需要 count */}
      <Counter />       {/* count 状态在内部 */}
      <Footer />        {/* 不需要 count */}
    </>
  );
}

4.4 虚拟列表（长列表）

1
npm install react-window
1
2
3
4
5
6
7
8
9
10
import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={50}
  width="100%"
>
  {({ index, style }) => <div style={style}>Row {index}</div>}
</FixedSizeList>

5. Concurrent 模式（React 18+）

核心能力：可中断的渲染。

5.1 自动批处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// React 18 之前：只在事件处理器中批处理
// React 18+：所有地方都批处理
function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  // setTimeout、Promise、原生事件都自动批处理
  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // 只触发 1 次 render
  }, 1000);

  fetch().then(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // 也只触发 1 次
  });
}

5.2 useTransition

标记非紧急更新，可被紧急更新打断：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { useTransition } from 'react';

function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setQuery(e.target.value);  // 紧急：输入框立即更新

    startTransition(() => {
      // 非紧急：可以被打断
      setResults(filterBigList(e.target.value));
    });
  };

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <ResultList results={results} />
    </>
  );
}

5.3 useDeferredValue

延迟某个值的更新：

1
2
3
4
5
6
7
8
9
10
11
12
import { useDeferredValue } from 'react';

function Search({ query }) {
  const deferredQuery = useDeferredValue(query);

  return (
    <>
      <input value={query} />
      <SlowList query={deferredQuery} />  {/* 慢操作使用 deferred */}
    </>
  );
}

5.4 Suspense

等待异步组件，渲染 fallback：

1
2
3
4
5
6
7
import { Suspense, lazy } from 'react';

const Heavy = lazy(() => import('./Heavy'));

<Suspense fallback={<Loading />}>
  <Heavy />
</Suspense>

数据获取（搭配 React Query / SWR）：

1
2
3
<Suspense fallback={<Skeleton />}>
  <UserDetail userId={id} />  {/* 内部用 use() 抛 Promise */}
</Suspense>

6. Server Components（RSC）

React 的新范式：组件在服务器渲染，不发到客户端。

6.1 优势

  • bundle size 减小：服务器组件的代码不发到浏览器
  • 直接访问后端：DB、文件系统、内部服务
  • 首屏更快：HTML 流式响应
  • SEO 友好

6.2 用法（Next.js 13+ App Router）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// app/page.tsx（默认 Server Component）
import { getData } from './db';

export default async function Page() {
  const data = await getData();  // 直接 await，服务器端执行
  return <div>{data.title}</div>;
}

// app/ClientComponent.tsx（要交互的，加 'use client'）
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

6.3 何时用 Server vs Client

用 Server 用 Client
静态内容、SEO 用户交互（onClick, onChange）
数据获取、DB 查询 浏览器 API（localStorage, fetch 的浏览器版本）
大型依赖（marked, sharp） 状态管理（useState, useReducer）
敏感逻辑（API keys） 动画、过渡效果

7. React 19 新特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 1. use() Hook：读取 Promise/Context
function User({ userPromise }) {
  const user = use(userPromise);  // 自动 Suspense
  return <div>{user.name}</div>;
}

// 2. Form Actions
function Form() {
  async function action(formData) {
    'use server';
    await saveToDB(formData);
  }
  return <form action={action}><button>Submit</button></form>;
}

// 3. useOptimistic（乐观更新）
function Like({ likes }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(likes);
  async function handleLike() {
    addOptimisticLike(likes + 1);  // 立即更新 UI
    await api.like();               // 后台同步
  }
  return <button onClick={handleLike}>❤️ {optimisticLikes}</button>;
}

// 4. useActionState
function Form() {
  const [state, formAction, isPending] = useActionState(action, initial);
  return <form action={formAction}>...</form>;
}

// 5. ref 作为 prop（不再需要 forwardRef）
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

8. 状态管理选型

方案 适用场景 缺点
useState + Context 小应用、跨组件共享 频繁更新性能差
Redux Toolkit 大型应用、复杂状态 学习曲线
Zustand 中小型应用、轻量级 生态较小
Jotai 原子化状态 生态较小
Recoil Meta 风格（已不推荐） 维护减少
TanStack Query 服务端状态 不是 UI 状态

Zustand 示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { create } from 'zustand';

interface BearState {
  bears: number;
  increase: (by: number) => void;
  reset: () => void;
}

const useBearStore = create<BearState>((set) => ({
  bears: 0,
  increase: (by) => set((s) => ({ bears: s.bears + by })),
  reset: () => set({ bears: 0 }),
}));

// 用法
function BearCounter() {
  const bears = useBearStore((s) => s.bears);
  const increase = useBearStore((s) => s.increase);
  return <button onClick={() => increase(1)}>{bears}</button>;
}

9. 测试

React Testing Library（推荐）：

1
2
3
4
5
6
7
8
9
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter', () => {
  render(<Counter />);
  const button = screen.getByRole('button');
  fireEvent.click(button);
  expect(button).toHaveTextContent('1');
});

Vitest（更快的 Jest 替代）：

1
2
3
4
5
6
7
8
9
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';

describe('Counter', () => {
  it('renders', () => {
    const { getByText } = render(<Counter />);
    expect(getByText('Count: 0')).toBeInTheDocument();
  });
});

小结

概念 关键点
Hooks 链表存储，必须顶层调用
渲染 函数式组件返回 JSX
状态 useState/useReducer，state 不可变
副作用 useEffect（异步）vs useLayoutEffect（同步）
性能 memo、useCallback、useMemo、下放状态
并发 useTransition、useDeferredValue、Suspense
RSC 默认在服务器，要交互加 ‘use client’
React 19 use()、Form Actions、useOptimistic

2026 React 生态推荐：

  • 新项目：Next.js 14+ App Router（默认 RSC）
  • 库：Vite + React 19
  • 状态：Zustand（小）/ Redux Toolkit（大）
  • 数据：TanStack Query (React Query)
  • 样式：Tailwind CSS / CSS Modules
  • 测试：Vitest + React Testing Library + Playwright

下一节讲 Vue 3 进阶：响应式原理、Composition API、性能优化。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
Java后端开发、Linux开发、
公众号开发、开源爱好者、Linux

联系QQ:562054870