【React】React18新特性 - Concurrent Mode（CM）

前言

Concurrent Mode（CM）是 React18 渲染UI的新机制，在此之前 React 是同步渲染模式，这就意味着一旦开始渲染组件树，React 会阻塞其他任务，直到渲染完成，这种阻塞渲染可能导致应用卡顿。

下面介绍Concurrent Mode新特性

1. 异步渲染

React 可以将渲染任务拆分为多个小块，分段执行。通过将渲染过程变为 「可中断的」，React 可以在有更高优先级的任务（如用户交互或动画）出现时暂停渲染，并在合适的时候继续完成。

2. 自动批处理更新

多个状态更新可以在同一渲染周期内合并处理，从而减少不必要的渲染次数。

React18之前，会触发两次渲染

setState1(value1);
setState2(value2);

无论状态更新是在同步事件（如点击事件）还是异步操作（如 setTimeout 或 fetch 回调）中触发，React 都会将它们批处理，以优化性能。

在 React 18 之前，只有在事件处理器中发生的状态更新会被批处理，而异步回调中的状态更新会触发单独的渲染。现在，所有状态更新都可以自动批处理。

可以通过flushSync强制同步处理：

import { flushSync } from "react-dom"
flushSync(()=>setState1(prev=>prev+1)) // 更新一次dom
flushSync(()=>setState2(prev=>prev+2)) // 更新一次dom

3. 优先级管理

React 可以根据任务的紧急程度决定何时暂停或恢复渲染。例如，用户的输入、点击和动画被视为高优先级任务，而页面内容更新可以被视为低优先级任务。这样 React 可以动态调度任务，避免 UI 卡顿。

如何实现自动批处理更新以及优先级管理

Concurrent Mode 依赖 Fiber Reconciler（React16之前采用的Stack Reconciler） 和 Lanes （React18之前采用expirationTime） 的优先级调度机制，二者相辅相成。Fiber 负责将任务拆分为小块，允许在必要时暂停渲染，而 Lanes 提供了一种精细化的任务优先级管理，使得 React 能够动态调度和执行渲染任务。

• Fiber：负责调度任务、拆分更新，确保更新可以被中断和恢复。
• Lanes：提供任务的优先级系统，确保高优先级的任务（如用户输入）不会被低优先级任务（如数据加载）阻塞。
• Concurrent Mode：使得 React 能够在处理繁重任务的同时保持 UI 的高响应性。