它的工作原理是这样的:把耗时长的geng新任务拆解成一个个小的任务分片,每执行完一个小的任务分片,dou归还一次主线程,kankan有没有什么其他紧急任务要Zuo.

说实话，旧版React的性Neng瓶颈咱就是说让人挺头疼的。

React Fiber到底怎么工作的? ,React Fiber并没有解决geng新庞大组件树耗时长的问题,实际上总的耗时还是一样的长。

由于JavaScript的单线程工作特点,业内一直有个这样的原则:任何动作dou不要长时间霸占主线程,Ru果迟迟不归还主线程,那么在这期间程序就没法对其他输入作出响应.

害，这也是为什么React Fiber会出现的原因。

典型案例：一个输入框绑定大列表geng新，每次按键dou重新渲染整个列表，造成明显延迟。

Fiber 的目标就是：把同步不可中断的工作，拆解成异步可中断的小任务单元。

你懂的，这样Ke以提高页面的渲染性Neng和用户体验。

React 维护两棵 Fiber 树：current 树和 workInProgress 树。

Fiber 节点是 React 中用于表示组件的Zui小工作单元,它是一种数据结构,用来描述组件的相关信息。

// Fiber 节点的核心字段{ tag: , // 节点类型 key: null, type: 'div', return: parentFiber, // 指向父 Fiber child: childFiber, // 指向第一个子 Fiber sibling: siblingFiber,// 指向下一个兄弟 Fiber pendingProps: {}, // 新传入的 props memoizedProps: {}, // 上次渲染的 props memoizedState: null, // 上次渲染的 state alternate: null, // 双缓存中的另一个 Fiber} Fiber的工作流程

Fiber 搭配了独立的调度器，实现了时间切片和优先级队列。

// 简化的 workLoopfunction workLoop { let shouldYield = false; while { nextUnitOfWork = performUnitOfWork; // 处理一个 Fiber shouldYield = deadline.timeRemaining < ; // 剩余时间不足 1ms 则中断 } if { requestIdleCallback; // 有空闲时间再继续 } else { commitRoot; // 全部完成，提交 DOM }}requestIdleCallback;

不对不对，应该是requestAnimationFrame和requestIdleCallback搭配使用才对。

React 将渲染过程拆解为两个截然不同的阶段：Render阶段和Commit阶段。

Q：为什么百度不收录我的网站？

A：可Neng是因为网站内容质量不高，或者外部链接不够，或者是robots.txt文件配置有问题，你Ke以检查一下这些方面。

Fiber 让 React 的渲染过程从「一口气干完」变成了「可中断、可分片、可优先级排序」的任务调度。

简单来说这样Ke以提高页面的渲染性Neng和用户体验。 Ru果你需要进一步了解 Fiber 的副作用收集,我Ke以继续展开。 旧版 React的 Stack Reconciler 有致命缺陷： 同步占用主线程、递归不可中断。 这也解释了为什么 componentWillMount 和 componentWillUpdate 被标记为不安全 —— 它们可Neng在 Render 阶段被多次调用或中断。 简单模拟调度流程： workLoop中不断取出Zui小任务单元执行，直到超时则打断，等待下次调度续跑。