React Fiber 深入理解

        处理序：为电脑配置的最小单位,执行绪：电脑用来执行工作的最小单. DFS （Deep优先遍历）：从根结点开始，依次往下寻找子结点，如果没有子结点，则寻找父结点，如果没有子结点，则寻找父结点，直至将所有的数据都遍历一遍。帧速：帧速仅仅是屏幕刷新的速度，通常60 FPS。 也就是说，屏幕上的画面每秒刷新六十次，也就是说，每一幅画面都需要16.6毫秒的时间。
天津天迅达科技有限公司
如果您需要相关服务，可以找天津天迅达科技有限公司，我们的业务有Web开发、iOS APP、Android APP、微信开发、HTML5开发等，天迅达——您身边的App个性化定制专家！
        为何 React将开发 Fiber架构,React16发布 Fiber前， Reactor将使用深度优先遍历（DFS）来比较虚拟 DOM树，从而发现修改的节点。 然后对它们进行同步更新，这就是所谓的“协调”。 如果 Dom的节点很深，那么在 reconciliation过程中， react将持续消耗浏览器的资源，如果超过16.6 ms，即一个帧，那么网页就会卡。所以， react希望通过引进 Fiber来解决长时间占用主线程的问题。 将渲染和更新过程分割成若干个小的部分，使得修复过程具有可中断性，并通过合理的调度机制来调节时间，确定任务的执行时间，减少页面延迟的几率。
        什么是Fiber,Fiber可以看作是一个执行单元，或者是一个数据结构.
        执行单元,执行单位是指通过 react将一个大的任务分解成许多小块的任务，每个小块都是在一次执行中必须要做的，而每个小块在完成之后都会询问浏览器有没有剩余的时间，如果不够用，则将控制交还给浏览器，剩余的时间则继续进行下一步。
        数据结构,Fiber也可以被认为是一个数据结构， React Fiber使用了一个链表来实现。 每一个结点都可以用 Fiber来表达， Fiber中含有诸如 child、父结点、父结点等属性。
        Fiber执行原理,从根节点开始渲染和调度主要有以下几个阶段：render阶段、commit阶段。
        render阶段：这一阶段可以被打破，并发现在所有的节点上都发生了变化。
        commit阶段：这个阶段是不可中断的，会执行所有的变更。
        render阶段,在这一步中，我们会发现所有的变化，比如节点的增加，删除，属性的改变等等，这些改变都被记录成了副作用。这一步将建立一棵 Fiber树，将任务分解成一个虚拟 DOM作为一个任务，最终生成一个效果列表，通过这个列表可以了解节点的添加、删除和更新。 有些全局变量也将被建立.单元执行在这里我们就可以引入一个requestAnimationFrame和requestIdleCallback的api。requestAnimationFrame:一帧内必须执行的函数。requestIdleCallback：一帧内如果有空闲时间就执行的函数。requestAnimationFrame
        window.requestAnimationFrame()  告知浏览器-你想要进行一段动画，然后请求浏览器调用特定的回呼功能，然后再重新绘制动画。这个方法要求传递一个调用函数的参数，这个调用函数将在下次重新绘制浏览器前执行 。requestIdleCallbackwindow.requestIdleCallback()  方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。
        requestIdleCallback也是之前 react Fiber 实现的基础 api,React自己实现了它。它使用 messagechannel来推迟回叫，直到绘图操作结束。commit阶段,在这个阶段，你必须在 DOM树中一次性地将前一步计算出来的副作用全部更新到 DOM树中，这个阶段不能中止，不然就会导致 UI的不连续更新。
以上所有设计图和部分文字均来自网络，如有侵权，请call我删除，感谢~
天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索，已经帮助每一个客户快速开发出属于自己的APP、小程序、网站，是万千企业之选。
标签：天迅达科技 天津APP开发 天津网站建设 网站建设