react 如何使用fiber
React Fiber 的基本概念
React Fiber 是 React 16 引入的新的协调引擎，旨在优化渲染性能，支持增量渲染、任务分片和优先级调度。它通过将渲染工作拆分为多个小任务，避免阻塞主线程，从而实现更流畅的用户体验。
Fiber 的核心机制
Fiber 架构将虚拟 DOM 树转换为 Fiber 树，每个 Fiber 节点对应一个组件或 DOM 元素。Fiber 节点包含以下关键信息：
type: 组件类型（函数/类组件或 HTML 标签）。props: 组件的属性。state: 组件的状态（如类组件的this.state）。child、sibling、return: 指向子节点、兄弟节点和父节点的指针。
手动操作 Fiber 的示例
虽然 React 内部自动管理 Fiber，但可以通过 ref 或调试工具访问 Fiber 节点：
import { useRef, useEffect } from 'react';
function MyComponent() {
const ref = useRef(null);
useEffect(() => {
if (ref.current) {
// 获取 Fiber 节点（内部 API，不推荐生产环境使用）
const fiberNode = ref.current._reactInternals;
console.log(fiberNode);
}
}, []);
return <div ref={ref}>Hello Fiber</div>;
}Fiber 的调度优先级
Fiber 支持优先级调度，例如通过 React.unstable_runWithPriority 控制任务优先级：
import { unstable_runWithPriority, unstable_NormalPriority } from 'react';
unstable_runWithPriority(unstable_NormalPriority, () => {
// 在此回调中的更新会以普通优先级执行
});调试 Fiber 树
使用 React DevTools 可以可视化 Fiber 树：
- 安装 Chrome 或 Firefox 的 React DevTools 扩展。
- 在开发者工具中选择 "Components" 标签。
- 勾选 "Show component filber tree" 查看 Fiber 结构。
注意事项
- Fiber 内部 API（如
_reactInternals）可能随版本变化，避免在生产环境依赖。 - 优先级 API（如
unstable_runWithPriority）标记为unstable，需谨慎使用。 - Fiber 的异步渲染特性可能导致生命周期行为变化（如
componentWillMount被废弃）。
通过理解 Fiber 的协调机制，可以更好地优化 React 应用性能，尤其是在处理复杂 UI 或动画时。
