类别：react / 日期：2023-02-27 / 浏览：272 / 评论：0
理解
React16 以前
React16 以前，对virtural dom的更新和渲染是同步的。就是当⼀次更新或者⼀次加载开始以后，diffffvirtual dom并且渲染的过程是⼀⼝⽓完成的。如果组件层级⽐较深，相应的堆栈也会很深，⻓时间占⽤浏览器主线程，⼀些类似⽤户输⼊、⿏标滚动等操作得不到响应。借Lin的两张图，视频 A Cartoon Intro to Fiber - React Conf 2017。
React16 Fiber Reconciler
React16 ⽤了分⽚的⽅式解决上⾯的问题。
就是把⼀个任务分成很多⼩⽚，当分配给这个⼩⽚的时间⽤尽的时候，就检查任务列表中有没有新的、优先级更⾼的任务，有就做这个新任务，没有就继续做原来的任务。这种⽅式被叫做异步渲染(AsyncRendering)。
⼀些原理
Fiber就是通过对象记录组件上需要做或者已经完成的更新，⼀个组件可以对应多个Fiber。
在render函数中创建的React Element树在第⼀次渲染的时候会创建⼀颗结构⼀模⼀样的Fiber节点树。
不同的React Element类型对应不同的Fiber节点类型。⼀个React Element的⼯作就由它对应的Fiber节点来负责。
⼀个React Element可以对应不⽌⼀个Fiber，因为Fiber在update的时候，会从原来的Fiber（我们称为current）clone出⼀个新的Fiber（我们称为alternate）。两个Fiber diffff出的变化（side effffect）记录在alternate上。所以⼀个组件在更新时最多会有两个Fiber与其对应，在更新结束后alternate会取代之前的current的成为新的current节点。
其次，Fiber的基本规则：
更新任务分成两个阶段，Reconciliation Phase和Commit Phase。Reconciliation Phase的任务⼲的事情是，找出要做的更新⼯作（Diffff Fiber Tree），就是⼀个计算阶段，计算结果可以被缓存，也就可以被打断；Commmit Phase 需要提交所有更新并渲染，为了防⽌⻚⾯抖动，被设置为不能被打断。
PS: componentWillMount componentWillReceiveProps componentWillUpdate ⼏个⽣命周期⽅法，在Reconciliation Phase被调⽤，有被打断的可能（时间⽤尽等情况），所以可能被多次调⽤。其实shouldComponentUpdate 也可能被多次调⽤，只是它只返回true或者false，没有副作⽤，可以暂时忽略。
版权声明 : 本文未使用任何知识共享协议授权，您可以任何形式自由转载或使用。
发表评论 / 取消回复