react的fiber 用法
在 React 里，Fiber 是 React 16.x 及后续版本采用的协调算法，它把渲染工作分割成多个小任务，让 React 可以在渲染过程中暂停、恢复和复用任务，以此提升渲染性能与响应能力。在实际开发中，你无需直接操作 Fiber 节点，不过你可以借助 React 的 API 来利用 Fiber 的特性。下面从几个方面为你讲解 Fiber 的用法。
1. 异步渲染
Fiber 架构实现了异步渲染，这意味着 React 能在渲染期间暂停工作，处理高优先级的事件。你可以通过 React.lazy 和 Suspense 来实现代码分割和异步加载组件。
import React, { lazy, Suspense } from 'react';// 异步加载组件
const LazyComponent = lazy(() => import('./LazyComponent'));function App() {return (<div><Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense></div>);
}export default App;
2. 优先级调度
Fiber 架构支持任务优先级调度，借助 React.unstable_runWithPriority 函数，你能设置不同任务的优先级。
import React, { unstable_runWithPriority as runWithPriority } from 'react';function App() {const handleClick = () => {runWithPriority('userBlocking', () => {// 高优先级任务console.log('High priority task');});runWithPriority('normal', () => {// 普通优先级任务console.log('Normal priority task');});};return (<button onClick={handleClick}>Run tasks with different priorities</button>);
}export default App;
3. 时间切片
Fiber 利用时间切片技术，把渲染工作拆分成多个小任务，避免长时间阻塞主线程。在 React 中，你可以使用 React.memo 来对组件进行记忆化，减少不必要的渲染。
import React from 'react';// 记忆化组件
const MemoizedComponent = React.memo(({ data }) => {return <div>{data}</div>;
});function App() {const [count, setCount] = React.useState(0);return (<div><button onClick={() => setCount(count + 1)}>Increment</button><MemoizedComponent data={count} /></div>);
}export default App;
总结
- 异步渲染：借助
React.lazy和Suspense实现代码分割和异步加载组件。 - 优先级调度：使用
React.unstable_runWithPriority函数设置任务优先级。 - 时间切片：通过
React.memo记忆化组件，减少不必要的渲染。
Fiber 是 React 16.x 及以后版本所采用的协调算法，其核心目标在于提升 React 应用的渲染性能和响应能力。下面详细介绍 React Fiber 的核心技术点：
核心技术
1. 架构目标与动机
- 渲染性能优化：传统的协调算法在处理大型组件树时，可能会出现长时间阻塞主线程的情况，导致页面卡顿。Fiber 通过将渲染任务拆分成多个小任务，允许在渲染过程中暂停、恢复和重新排序任务，避免长时间占用主线程，从而提升渲染性能。
- 优先级调度：Fiber 架构支持任务优先级调度，能够根据任务的重要性和紧急程度对任务进行排序，优先处理高优先级的任务，如用户交互事件，提高应用的响应能力。
2. 核心概念
- Fiber 节点：Fiber 节点是 Fiber 架构中的基本单元，每个 React 元素都对应一个 Fiber 节点。Fiber 节点包含了组件的状态、属性、副作用等信息，同时还维护了与其他 Fiber 节点的关系，如父节点、子节点和兄弟节点。
- Fiber 树：由多个 Fiber 节点组成的树形结构，代表了 React 应用的组件树。Fiber 树有两棵，分别是
current树和workInProgress树。current树表示当前屏幕上显示的内容，workInProgress树是正在构建的新树，构建完成后会替换current树。 - 任务调度：Fiber 架构将渲染任务拆分成多个小任务，每个任务对应一个 Fiber 节点的处理。调度器会根据任务的优先级和时间片来决定何时执行任务，确保高优先级任务能够及时处理。
3. 工作流程
- 调度阶段（Scheduler）：当组件的状态或属性发生变化时，React 会创建一个新的
workInProgress树，并将任务添加到调度器中。调度器会根据任务的优先级和时间片来决定何时执行任务。如果当前有高优先级的任务（如用户交互事件），调度器会暂停当前正在执行的任务，优先处理高优先级任务。 - 协调阶段（Reconciler）：调度器选择一个任务后，会将其交给协调器处理。协调器会递归遍历
workInProgress树，比较current树和workInProgress树的差异，标记出需要更新、插入或删除的节点。这个过程是可以暂停和恢复的，因为每个 Fiber 节点的处理都是一个独立的小任务。 - 提交阶段（Renderer）：当协调阶段完成后，所有的差异都已经标记好。提交阶段会将这些差异一次性应用到真实 DOM 上，更新页面显示。提交阶段是不可中断的，确保页面的一致性。
4. 优先级调度
- 任务优先级：Fiber 架构定义了多种任务优先级，如
ImmediatePriority（最高优先级，立即执行）、UserBlockingPriority（用户交互相关的高优先级任务）、NormalPriority（普通优先级任务）、LowPriority（低优先级任务）和IdlePriority（空闲时执行的任务）。 - 优先级调度算法：调度器会根据任务的优先级和时间片来决定任务的执行顺序。高优先级的任务会优先执行，并且可以中断低优先级的任务。当高优先级任务执行完成后，低优先级任务会继续执行。
5. 异步渲染
- 时间切片：Fiber 利用时间切片技术，将渲染工作拆分成多个小任务，每个任务执行一段时间后暂停，将控制权交还给主线程，让主线程有机会处理其他事件，如用户交互、动画等。这样可以避免长时间阻塞主线程，提高应用的响应能力。
- Suspense 和 Lazy 组件：Fiber 架构支持异步加载组件，通过
React.lazy和Suspense可以实现代码分割和异步渲染。当组件需要异步加载时，Suspense组件可以显示一个加载提示，直到组件加载完成。
6. 副作用处理
- 副作用（Effect）：在 React 中，副作用是指那些会影响外部环境的操作，如数据获取、订阅、DOM 操作等。Fiber 架构通过
useEffect和useLayoutEffect等 Hooks 来处理副作用。 - 副作用调度：副作用的执行也遵循优先级调度原则。
useEffect会在提交阶段之后异步执行，不会阻塞页面渲染；useLayoutEffect会在提交阶段同步执行，用于处理需要立即更新 DOM 的副作用。