React Concurrent Mode 是什么？怎么使用？

React Concurrent Mode（并发模式）是 React 的一种底层架构模式，它允许 React 中断、暂停、恢复甚至放弃正在进行的渲染工作，从而优化应用在复杂场景下的用户体验。

简单来说，Concurrent Mode 让 React 能够 "同时" 处理多个渲染任务（实际上是通过时间切片模拟并行），并根据任务的优先级调整执行顺序，比如优先响应用户输入（点击、输入等），而延迟处理耗时的渲染工作，避免页面卡顿。

核心特点：

可中断渲染：渲染过程可以被高优先级任务（如用户交互）打断
优先级调度：不同类型的更新有不同优先级（如动画 > 数据更新）
** Suspense 增强 **：配合 Suspense 实现更强大的异步加载能力
Transitions：区分紧急更新（如输入框输入）和非紧急更新（如筛选结果）

如何使用（基于 React 18+）：

React 18 中，Concurrent Mode 不再是一个需要手动开启的模式，而是通过新的根 API 自动启用。以下是关键用法：

启用 Concurrent Mode（React 18+）

javascript 复制代码

// 旧方式（不支持并发模式）
import ReactDOM from'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// 新方式（自动启用并发特性）
import ReactDOM from'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />); // 此时已支持并发特性

使用 useTransition 区分更新优先级

javascript 复制代码

import { useState, useTransition } from'react';

function SearchComponent() {
  const [input, setInput] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  // 处理输入（紧急更新）
  const handleInput = (e) => {
    setInput(e.target.value);
    
    // 标记为非紧急更新（会被用户交互打断）
    startTransition(() => {
      // 模拟耗时的筛选操作
      const filteredResults = heavySearchOperation(e.target.value);
      setResults(filteredResults);
    });
  };

  return (
    <div>
      <input value={input} onChange={handleInput} />
      {isPending? <p>加载中...</p> : (
        <ul>
          {results.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      )}
    </div>
  );
}

配合 Suspense 实现数据加载

javascript 复制代码

import { Suspense } from'react';
import DataComponent from './DataComponent';

function App() {
  return (
    <div>
      <h1>我的应用</h1>
      {/* 当 DataComponent 加载数据时显示 fallback */}
      <Suspense fallback={<div>加载数据中...</div>}>
        <DataComponent />
      </Suspense>
    </div>
  );
}

// DataComponent.js（使用 Suspense 兼容的数据获取）
function fetchData() {
  // 模拟异步请求
  return new Promise(resolve => {
    setTimeout(() => resolve({ name: "示例数据" }), 1000);
  });
}

const resource = {
  data: fetchData()
};

function DataComponent() {
  // 当数据未准备好时，会触发 Suspense 的 fallback
  const data = resource.data.read();
  return <div>{data.name}</div>;
}

注意事项：

React 18 中已不再需要通过 ReactDOM.createRoot 以外的方式手动开启 Concurrent Mode
并发特性主要通过 useTransition、Suspense、startTransition 等 API 体现
不是所有场景都需要使用并发特性，简单应用可能感受不到明显差异
一些第三方库可能需要更新以支持并发模式

通过 Concurrent Mode，React 应用能够在处理复杂操作时保持流畅的用户交互，特别适合数据量大、更新频繁的应用场景。