react 18 可中断的理解以及应用

news2025/4/12 10:57:23

React 的“可中断（interruptible）”渲染，指的是 React 在执行渲染过程中可以暂停、中断、再继续或放弃更新。这是 React 18 引入的并发特性的一部分，目的是让界面响应更流畅，防止“卡顿”。

📖 举个例子：传统 vs 可中断

✅ 传统（同步）渲染

当你更新一个组件（比如 setState），React 会一口气渲染完所有内容，期间浏览器不能响应用户操作。

问题：如果这个更新很大，比如更新 5000 个列表项，界面可能卡死几百毫秒，用户点击无响应。

✅ 可中断渲染（React 18 并发模式）

React 会：

把渲染分为多个小任务。
每执行一小段逻辑，就“让一让”给浏览器，比如让它响应滚动、输入、点击。
如果你中途发起了更重要的更新（如点击按钮），它甚至可以打断当前渲染并优先处理更紧急的事。

这就是“可中断”的意义。

🔧 怎么启用“可中断”？

React 18 开始，默认的渲染是同步的，要用 createRoot() 才能进入并发模式（可中断）：

// React 18
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

旧写法（ReactDOM.render）是不支持并发、不可中断的。

🧠 底层原理（简单了解下）

React 18 使用了所谓的Fiber 架构，它本质上是把渲染任务切成小块（Fiber 节点），然后用 requestIdleCallback 或 scheduler 在浏览器空闲时间执行这些任务。

可中断意味着：

React 可以暂停某个组件树的渲染。
React 可以放弃某个渲染（比如新来了更重要的 setState）。
React 可以重新调度优先级更高的任务。

🚀 应用场景举例

1. 大数据渲染

import React, { useState, startTransition } from 'react';
import { createRoot } from 'react-dom/client';

const App = () => {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);

  // 同步加载（不可中断）
  const handleSyncLoad = () => {
    setLoading(true);
    const data = Array.from({ length: 10000 }, (_, i) => `同步项 ${i}`);
    setList(data);
    setLoading(false);
  };

  // 可中断加载（使用并发 startTransition）
  const handleAsyncLoad = () => {
    setLoading(true);
    const data = Array.from({ length: 10000 }, (_, i) => `可中断项 ${i}`);
    startTransition(() => {
      setList(data);
      setLoading(false);
    });
  };

  return (
    <div style={{ padding: 20 }}>
      <h2>React 可中断渲染演示</h2>
      <button onClick={handleSyncLoad}>同步加载数据（会卡）</button>
      <button onClick={handleAsyncLoad} style={{ marginLeft: 10 }}>可中断加载（更流畅）</button>

      {loading && <p>加载中...</p>}

      <ul>
        {list.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

const root = createRoot(document.getElementById('root'));
root.render(<App />);

使用可中断渲染 + 虚拟滚动技术可以防止页面卡顿。