React 并发模式是如何执行的？

八股文_React面试题 0 22

参考回答

React 并发模式（Concurrent Mode）是 React 提供的一种新特性，旨在使应用程序的用户界面更加流畅和响应迅速。并发模式通过允许 React 在渲染过程中中断和暂停不重要的更新，来优化性能和提高响应性。在并发模式下，React 可以根据屏幕的需要选择执行某些操作的优先级，从而避免长时间的主线程阻塞。

并发模式的执行原理是 React 通过“时间切片”（time slicing）来进行渲染，它将渲染工作分解成多个小块，在空闲时逐步处理。这使得 React 可以在复杂或长时间运行的任务中，及时响应用户交互，提高 UI 响应速度。

详细讲解与拓展

1. 并发模式的核心原理

时间切片：React 的并发模式基于“时间切片”思想，即将渲染任务分割成更小的任务，分配给空闲时间去执行。这允许浏览器在处理这些任务时，能够中断并处理更高优先级的任务（如用户输入、动画等），从而避免界面卡顿。
优先级调度：并发模式会根据任务的重要性和紧急性，给不同的任务分配不同的优先级。例如，用户输入事件会被赋予较高的优先级，React 会尽量先响应这些输入，而不会被长时间运行的渲染任务阻塞。
中断和恢复：并发模式可以在渲染任务执行的过程中暂停和中断某些工作，在合适的时候恢复它们。例如，当有更高优先级的任务（如用户点击、输入框输入等）发生时，React 会暂停当前的渲染任务，处理用户交互，再恢复之前的任务。

举例：
```
// 普通渲染（在同步模式下）
const App = () => {
 return (
   <div>
     <h1>Welcome</h1>
     <ExpensiveComponent />
   </div>
 );
};
```
JavaScript
在并发模式下，ExpensiveComponent 的渲染会被分割成多个小片段，在用户交互的空闲时间中处理，而不会阻塞整个 UI 渲染。

2. 并发模式的工作流程

在并发模式下，React 会在内部使用调度器来控制任务的优先级和执行顺序。React 会根据不同任务的优先级决定是否需要暂停当前任务，去处理一个更高优先级的任务。
低优先级任务（如复杂的列表渲染）可以在高优先级任务（如用户输入、点击事件）执行时被暂停。

举例：
如果你有一个 ExpensiveComponent，它包含一些复杂的计算或渲染逻辑。React 会将这个渲染任务拆分成多个小部分，确保它不会阻塞其他高优先级任务。
```
const ExpensiveComponent = () => {
 // 长时间运行的渲染任务
 return <div>Expensive render here</div>;
};
```
JavaScript
通过并发模式，React 会将这个组件的渲染过程分割成小块，在用户输入或其他操作时，React 可以暂时挂起这个渲染任务，去处理更重要的任务。

3. Suspense 和并发模式的结合

Suspense 是 React 提供的另一项功能，旨在处理异步数据加载。Suspense 与并发模式配合使用，可以使得异步数据加载更加平滑。
在并发模式下，Suspense 组件能够在异步内容加载时提供一个加载状态，React 可以在加载的过程中处理其他任务，例如响应用户的点击操作等。

举例：
```
const UserProfile = React.lazy(() => import('./UserProfile'));

const App = () => {
 return (
   <Suspense fallback={<div>Loading...</div>}>
     <UserProfile />
   </Suspense>
 );
};
```
JavaScript
当 UserProfile 组件正在加载时，React 会显示一个 Loading... 提示，并且在等待加载的过程中，仍然可以响应用户的操作。

4. 并发模式中的调度器

React 中的调度器是并发模式的核心，它负责决定哪些任务先执行，哪些任务可以被中断。React 的调度器使用优先级队列来管理任务，根据任务的优先级来决定执行顺序。
调度器能够处理一些“预期外”的任务，比如用户输入或动画等，以便让用户界面看起来更流畅。

5. React 并发模式的启用

在 React 18 及以后版本中，React 并发模式是可选的，可以通过启用 createRoot API 来开启并发模式。它通过 ReactDOM.createRoot() 方法创建一个新的根节点，并允许启用并发渲染。

举例：
```
import { createRoot } from 'react-dom';

const root = createRoot(document.getElementById('root'));
root.render(<App />);
```
JavaScript
使用 createRoot API，React 会自动启用并发模式，开始并发渲染任务。

总结

React 并发模式通过时间切片和优先级调度的方式，使得 React 应用更加响应迅速。它允许将渲染任务分解成小块，避免长时间阻塞主线程，提升应用的流畅度和用户体验。并发模式在 React 18 中引入，并结合 Suspense 等功能，能够使得异步加载和用户交互的体验更加平滑。通过并发渲染，React 可以更高效地管理任务执行顺序，响应更为迅速，特别适用于复杂应用和需要高度交互的场景。