Fiber的深度理解

react15在render阶段的reconcile是不可打断的，这会在进行大量节点的reconcile时可能产生卡顿，因为浏览器所有的时间都交给了js执行，并且js的执行时单线程。为此react16之后就有了scheduler进行时间片的调度，给每个task（工作单元）一定的时间，如果在这个时间内没执行完，也要交出执行权给浏览器进行绘制和重排，所以异步可中断的更新需要一定的数据结构在内存中来保存工作单元的信息，这个数据结构就是Fiber。

那么有了Fiber这种数据结构后，能完成哪些事情呢，

工作单元任务分解：Fiber最重要的功能就是作为工作单元，保存原生节点或者组件节点对应信息（包括优先级），这些节点通过指针的形似形成Fiber树

增量渲染：通过jsx对象和current Fiber的对比，生成最小的差异补丁，应用到真实节点上

根据优先级暂停、继续、排列优先级：Fiber节点上保存了优先级，能通过不同节点优先级的对比，达到任务的暂停、继续、排列优先级等能力，也为上层实现批量更新、Suspense提供了基础

保存状态：因为Fiber能保存状态和更新的信息，所以就能实现函数组件的状态更新，也就是hooks

Fiber是一种数据结构

1.React目前的做法是使用链表, 每个 VirtualDOM 节点内部表示为一个Fiber2.从顶点开始遍历3.如果有第一个儿子，先遍历第一个儿子4.如果没有第一个儿子，标志着此节点遍历完成5.如果有弟弟遍历弟弟6.如果有没有下一个弟弟，返回父节点标识完成父节点遍历，如果有叔叔遍历叔叔7.没有父节点遍历结束

Fiber 其实指的是一种数据结构，它可以用一个纯 JS 对象来表示：

const fiber = {stateNode,    // 节点实例child,        // 子节点sibling,      // 兄弟节点return,       // 父节点
}

Fiber 树在首次渲染的时候会一次生成。在后续需要 Diff 的时候，会根据已有树和最新 Virtual DOM 的信息，生成一棵新的树。这颗新树每生成一个新的节点，都会将控制权交回给主线程，去检查有没有优先级更高的任务需要执行。如果没有，则继续构建树的过程

如果过程中有优先级更高的任务需要进行，则 Fiber Reconciler 会丢弃正在生成的树，在空闲的时候再重新执行一遍。

在构造 Fiber 树的过程中，Fiber Reconciler 会将需要更新的节点信息保存在Effect List当中，在阶段二执行的时候，会批量更新相应的节点。

Fiber的深度理解相关推荐

沈向洋：从深度学习到深度理解
2020-07-30 01:29:20 作者 | 蒋宝尚编辑 | 丛末 7月19日,深圳市人工智能与机器人研究院与香港中文大学(深圳)联合主办的"全球人工智能与机器人前沿研讨会" ...
深度理解do{} while(0)语句的作用
深度理解do{} while(0) 在linux内核中常常会看到do{} while(0)这样的语句,有人疑惑,认为无意义,因为他只执行一次,加不加do{} while(0)小过失完全一样的,那你就错 ...
go之树型结构深度理解补充
go之树型结构深度理解补充在上一篇中借用了 Ilija Eftimov 文章来讲解了tree的定义和一些方法.这篇文章主要是讲解在树型结构中如何判断节点与节点之间的关系. A节点是否是B节点的直接上 ...
【TensorFlow】TensorFlow从浅入深系列之二 -- 教你通过思维导图深度理解深层神经网络
本文是<TensorFlow从浅入深>系列之第2篇 TensorFlow从浅入深系列之一 -- 教你如何设置学习率(指数衰减法) TensorFlow从浅入深系列之二 -- 教你通过思维导 ...
FPGA同步复位与异步复位深度理解
1.1 FPGA同步复位与异步复位深度理解 1.1.1 本节目录 1)本节目录: 2)本节引言: 3)FPGA简介: 4)FPGA同步复位与异步复位深度理解: 5)结束语. 1.1.2 本节引言 &q ...
顺丰不行了吗？对快递行业的深度理解
顺丰不行了吗?对快递行业的深度理解 https://www.toutiao.com/i6950169599203688997/?tt_from=weixin&utm_campaign=clie ...
风控算法知识——WOE值的深度理解与应用
导语:WOE值的深度理解与应用看这一篇就够啦!!! 关注"金科应用研院",回复"礼包" 领取风控资料合集 WOE是什么? WOE,全称是"Weight ...
深度理解面向对象的基础-抽象（一）
前言: 面向对象这个词对于我们程序开发人员来说,应该都不陌生,我们总说开发要面向对象,但实际上在编写代码的过程中,很多人虽然实现了封装.继承.多态但却不是面向对象的程序设计,而是面向过程的实现逻辑,徒 ...
【C语言】深度理解负数取余取模
C语言深度理解负数取余取模关于取余和取模的问题定义取余时有负数怎么计算? 取余和取模的区别取余和取模时候等价什么时候不等价总结关于取余和取模的问题许多小伙伴在刚开始学C语言的时候,知 ...

Fiber的深度理解

Fiber的深度理解相关推荐

最新文章

热门文章