react最新fiber架构原理和流程
react16以后做了很⼤的改变，对diff算法进⾏了重写，从总体看，主要是把⼀次计算，改变为多次计算，在浏览器有⾼级任务时，暂停计算。
原理：从Stack Reconciler到Fiber Reconciler，源码层⾯其实就是⼲了⼀件递归改循环的事情
fiber设计⽬的：解决由于⼤量计算导致浏览器掉帧现象。
由于js是单线程的，解决主线程被长时间计算占⽤的问题，就是将计算分为多个步骤，分批完成，每完成⼀次计算就将主线程交还给浏览器，让页⾯有时间渲染。
react更新前后：
旧版：旧版 React 通过递归的⽅式进⾏渲染，使⽤的是 JS 引擎⾃⾝的函数调⽤栈，它会⼀直执⾏到栈空为⽌
新版：Fiber实现了⾃⼰的组件调⽤栈，它以链表的形式遍历组件树，可以灵活的暂停、继续和丢弃执⾏的任务。实现⽅式是使⽤了浏览器的requestIdleCallback这⼀ API。
React从框架层⾯有三个层级
Virtual DOM 层Virtual DOM 层，描述页⾯长什么样。
Reconciler 层负责调⽤组件⽣命周期⽅法，进⾏ Diff 运算等。
Renderer 层根据不同的平台，渲染出相应的页⾯，⽐较常见的是 ReactDOM 和 ReactNative。
为了加以区分，以前的 Reconciler 被命名为Stack Reconciler。Stack Reconciler 运作的过程是不能被打断的，必须⼀条道⾛到⿊。
为了达到这种效果，就需要有⼀个调度器 (Scheduler) 来进⾏任务分配。任务的优先级有六种：react native
synchronous，与之前的Stack Reconciler操作⼀样，同步执⾏
task，在next tick之前执⾏
animation，下⼀帧之前执⾏
high，在不久的将来⽴即执⾏
low，稍微延迟执⾏也没关系
offscreen，下⼀次render时或scroll时才执⾏
优先级⾼的任务（如键盘输⼊）可以打断优先级低的任务（如Diff）的执⾏，从⽽更快的⽣效。
Fiber 树
fiber reconciler在第⼀阶段diff时，会⽣成⼀棵树，这棵树是在virtual dom的基础上增加额外信息⽣成的，本质上是⼀个链表。
fiber tree⾸次渲染：⼀次⽣成
后续diff：根据virtual dom和已有tree⽣成新的tree，这棵树每⽣成⼀个节点，都会把控制权交给浏览器，去检查有没有优先级更⾼的任务需要执⾏。如果没有，则继续构建树的过程，如果过程中有优先级更⾼的任务需要进⾏，则 Fiber Reconciler 会丢弃正在⽣成的树。
总结：从Stack Reconciler到Fiber Reconciler，源码层⾯其实就是⼲了⼀件递归改循环的事情

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。