对Fiber的理解

99 阅读2分钟

什么是Fiber?对于一个执行时间很长的任务来说,Fiber是怎么对它切分时间片的?

什么是Fiber →任务如何切分?→具体如何实现

Fiber是React的框架也可以说一种任务调度机制,他通过将任务切分成多个小块,让长任务可以在浏览器空闲时间逐步完成,同时保证页面的响应性,比如用户交互或动画渲染。

时间片切分核心就是让React在执行任务时可以中断和恢复,从而避免阻塞主线程。

Fiber的时间切片是通过将任务拆分为多个小的Fiber节点,并以递归遍历的方式逐步执行。这种拆分遵循Fiber树的结构,优先处理高优先级任务,并使用调度器控制每个时间片内能执行多少工作。

Fiber会在渲染阶段通过遍历Fiber树完成任务拆分。它会动态检测时间片是否用完(比如通过performance.now() )如果超时就暂停任务,保存当前进度,等到下一次空闲时间再继续

React使用调度器来管理这些任务,会根据优先级中断低优先级任务,比如用户交互或动画优先级比后台数据更高。具体来说React调度器会对任务进行优先级划分,比如同步任务、用户交互任务和空间任务。任务被插入一个优先级队列中,根据时间片和优先级动态调度。浏览器空闲时调用requestIdCallback 来恢复任务。

在fiber架构中,对同一个组件的多次状态修改,会不会出现一个成功,另一个失败被中断的情况?

不会,因为react的更新机制是原子性的,再提交阶段,一个更新操作要么完整应用,要么完全不应用。