React 进阶面试题, React 异步渲染的概念是什么?什么是 Time Slicing 和 Suspense?
React 进阶面试题, React 异步渲染的概念是什么?什么是 Time Slicing 和 Suspense?
QA
Step 1
Q:: React 异步渲染的概念是什么？
A:: React 异步渲染（Asynchronous Rendering）是 React 通过将渲染过程分解为多个任务块，以非阻塞方式进行处理的一种技术。异步渲染使得 React 能够在长时间的渲染任务中暂停渲染，允许浏览器在空闲时执行其他任务，比如响应用户输入或者处理动画。异步渲染的目的是提高应用的响应性，避免界面卡顿，从而提升用户体验。
Step 2
Q:: 什么是 Time Slicing？
A:: Time Slicing（时间切片）是 React 异步渲染中的一个核心概念。它允许 React 将渲染任务分割成小的时间片段，每个片段只执行一部分渲染任务。当浏览器需要处理更高优先级的任务（例如用户输入）时，React 可以暂停渲染，等到浏览器空闲时再继续处理剩余的任务。Time Slicing 使得长时间的渲染任务不会阻塞主线程，从而提升页面的响应性。
Step 3
Q:: 什么是 Suspense？
A:: Suspense 是 React 16.6 引入的一种新特性，它用于处理组件加载过程中出现的异步操作，例如数据获取或代码拆分。在 Suspense 中，React 可以 '暂停' 渲染，等待异步操作完成后再继续。与异步组件或数据加载的结合，Suspense 可以使得应用在异步操作完成之前显示一个备用的界面（例如加载动画），从而避免页面因数据尚未加载而显示空白。
Step 4
Q:: React 如何确定任务的优先级？
A:: React 通过区分同步更新和异步更新来确定任务的优先级。同步更新一般用于用户交互（如点击、输入等）导致的更新，这类更新要求尽快完成以保证用户体验。异步更新则常用于数据获取或其他后台任务引发的更新，优先级较低。React 使用一种叫做 Scheduler 的内部调度器来管理和执行这些不同优先级的任务，确保应用可以合理地响应用户操作。