当前位置：首页 > React

如何启用react并发模式

2026-03-31 13:34:00React

启用 React 并发模式的方法

React 并发模式（Concurrent Mode）是 React 18 引入的新特性，允许应用在渲染过程中中断并优先处理高优先级任务。以下是启用并发模式的具体方法：

升级到 React 18 或更高版本

确保项目依赖中 React 和 React DOM 的版本为 18 或更高。在 package.json 中检查并更新：

如何启用react并发模式

"dependencies": {
  "react": "^18.0.0",
  "react-dom": "^18.0.0"
}

运行 npm install 或 yarn install 安装最新版本。

如何启用react并发模式

使用新的根 API 创建应用

在 React 18 中，传统的 ReactDOM.render 已被替换为新的根 API createRoot。修改入口文件（如 index.js）：

import { createRoot } from 'react-dom/client';
import App from './App';

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

启用并发渲染特性

通过 createRoot 默认启用并发模式。部分并发特性（如 Suspense）需要配合以下 API 使用：

startTransition：标记非紧急状态更新。
useDeferredValue：延迟更新低优先级内容。
<Suspense>：处理异步加载组件的占位逻辑。

示例代码：使用并发特性

import { useState, startTransition } from 'react';

function App() {
  const [input, setInput] = useState('');
  const [list, setList] = useState([]);

  const handleChange = (e) => {
    setInput(e.target.value);
    startTransition(() => {
      // 非紧急更新
      setList(Array(10000).fill(e.target.value));
    });
  };

  return (
    <div>
      <input value={input} onChange={handleChange} />
      {list.map((item, index) => <div key={index}>{item}</div>)}
    </div>
  );
}