React Fiber : 是对react 核心算法的一次重新实现。
- 在之前react的更新是同步的,所有的更新逻辑会在一帧内完成。
- js是单线程,事情只能一件一件办。
关键点 老版本---v15之前,react递归对比虚拟DOM树,找出需要变更的点,然后同步更新他们。 这个过程被称为 协调。(Reconcilation)。关键词是: 同步 、 协调reconcilation。
在 协调过程中 - react 它会霸占 浏览器资源。 触发事件无响应、掉帧。
Fiber是让协调 reconcilation 这个过程变得可中断,让出CPU执行权。
浏览器更及时的响应用户交互。 分批延时的对DOM操作 会有更好的体验。 给浏览器一点喘息时间,他也可以做一些优化。
关键点 -- 将控制权交给浏览器
浏览器分配时间片-- 按照约定时间内执行完毕--再把控制权交给浏览器
合作式调度 cooperative Scheduling 通过requestIdCallBack
接受两个参数 - 一个回调、一个超时时间
回调的参数中有 didTimeOut 是否超时、timeRemaining()任务可供执行的剩余时间。
一帧内可以做的事情
用户输入、JS执行、 layout Paint等操作。
Immediate(-1) 立即执行、同步执行,不能中断
UserBlocking(250ms) 用户交互结果,需要立即反馈
网络请求 -- 不需要立即感知的任务
Fiber通过链表结构
指向父节点、子节点、第一个兄弟节点
双缓存技术 实现比较
存储了两个Fiber tree
之前的是current Fiber tree 正在更新的是 workInprogress Fiber tree
可以复用 更新 执行update操作 不可以复用 执行 mount unmount 挂载/移除挂载操作
更新完成后、 current指针执行workInprogress Firber tree 作为下一次的current tree
多个hooks为什么是有序的
每个 Fiber节点 保存一个memoizedState属性,链表的形式记录每个hooks 所以它是有序的,