关于react fiber的一些东西

65 阅读3分钟

Fiber机制下节点与树分别采用FiberNode与FiberTree进行重构 Fiber机制下整个更新过程由current与workInProgress两株树双缓存完成 当workInProgress更新完成后,通过修改current相关指针上的节点直接抛弃老树

树比对:两株虚拟dom树只对同一层级的节点进行比较 组件比对:如果组件是同一类型则进行父比对,如果不是就放入补丁中 元素比对:主要发生在同层级中,通过标记节点操作生成补丁,节点操作对应真实的dom剪裁操作

FiberNode采用了双链表的结构,可以直接找到兄弟节点与子节点

react拥有完整的diff算法策略,且拥有随时中断更新时间切片的能力,在大批量节点更新的极端情况下,拥有更友好的交互体验

根据diff算法的设计原则,应尽量避免夸层级节点移动,通过设置唯一key进行优化,尽量减少组件层级深度 因为过深的层级会加深遍历深度,带来性能问题 设置shouldComponentUpdate或者React.pureComponent减少diff次数

什么是Fiber: 在系统开发中,指一种最轻量化的线程,对于系统内核是不可见的,也不能由内核进行调度 运行模式被称为协作式多任务,线程采用的模式是抢占式多任务 在协作式多任务模式下,线程会定时放弃自己的运行权利告知内核让下一个线程运行 在抢占式下,内核决定调度方案,可直接剥夺长耗时线程的时间片,提供给其他线程 浏览器无法实现抢占式调度,所以react在设计上只能采用合作式调度方案 将渲染任务拆分成多段,每次只执行一段,完成后就把时间控制权交还给主线程

在React Element的基础上,通过createFiberFromElement函数创建Fiber对象 Fiber不仅包含ReactElement,还包含了指向父子兄弟节点的属性,保证Fiber构建的虚拟dom树称为一个双向链表

effect是指在协调过程中必须执行计算的活动

render阶段主要是通过构造workInProgress树计算出diff,以current树为基础,将每个Fiber作为一个基本单位 自下而上逐个节点检查并构造workInProgress树,这个过程不再是递归,而是基于循环来完成 在执行上通过requestIdleCallback调度执行每组任务,每组每个计算任务被称为work,每格work完成后确认是否有优先级更高的work需插入,如有就让位,没有就继续

在Commit阶段处理effect列表,这里的effect列表包含了根据diff更新dom树、回调生命周期、响应ref等。这个阶段是同步执行的,不可中断、暂停。 所以不要在componentDidMount、componentDidUpdate或者componentWillUnMount中执行重度消耗算力的任务