react fiber原理（模仿实现react fiber 任务调度）

本文目录

• 模仿实现react fiber 任务调度
• React事件对象
• React的diff算法详解
• react的fiber为什么快
• react渲染原理分析
• React Fiber

模仿实现react fiber 任务调度

react fiber也叫协程或者纤维，是把react任务分成一个个小任务，再通过调度在浏览器空闲时间来执行相关任务，避免阻塞浏览器渲染、响应用户行为等高优先级的任务。 本文只是模仿react实现任务在浏览器的空闲时间的中断、恢复和执行，并不代表是react的全部源码 首先用数据模拟一个fiber树(双向链表) 总结： 1、设置 requestIdleCallback 回调，告诉浏览器在空闲执行 workLoop 2、在 workLoop 中，nextUnitOfWork 为下一个执行单元，便于中断后恢复执行，requestIdleCallback的回调函数有一个默认参数deadline（包含timeRemaining方法：检查本帧是否还有空闲时间，didTimeout：是否已经超过过期时间）。判断是否还有剩余时间和还有剩余任务，有就执行任务，没有则交还控制权给浏览器。如果还有任务未执行，则告诉浏览在下一帧空闲时执行任务。 requestAnimationFrame(callback) 会在浏览器每次重绘前执行 callback 回调, 每次 callback 执行的时机都是浏览器刷新下一帧渲染周期的起点上。 requestAnimationFrame(callback) 的回调 callback 回调参数 timestamp 是回调被调用的时间，也就是当前帧的起始时间 总结：1、大致流程和使用requestIdleCallback一样，关键点在于如何得到当前帧的剩余时间（剩余时间=结束时间-已耗费的时间） 2、requestIdleCallbackPolyfill 借助requestAnimationFrame在animationTick函数中需要做的就是调整帧率和计算出帧的截止结束时间，activeFrameTime是一个假定时间（在react中的初始化假定时间也是33ms），保留需要执行的回调函数（若在rAF函数中执行，会加长帧的执行时间，因此将回调函数放在onmessage中去异步执行） 3、performance.now()这个web api表示为从 time origin 之后到当前调用时经过的时间 参考地址 4，最后在workLoop中，判断是否还有剩余时间执行任务

React事件对象

1 .SyntheticEvent说到底是用来模拟原生事件的,如果我们自己实现一个事件来模拟原生事件.我们需要模拟什么? 1 .dispatchConfig 2 .事件公用属性定义 1 .oEvent.stopImmediatePropagation();//Immediate //当一个元素绑定多个事件处理程序的时候，事件会按照顺序全部执行，如果不想让后面的事件处理程序执行，就在当前事件里加这个方法，就不执行后面的事件处理程序了 2 .oEvent.preventDefault();（在ie低版本中用oEvent.returnValue=true）//阻止事件的默认行为，比如阻止a的href链接。在智能设讲用return false。 2 .eventPhase 3 .bubbles:返回一个布尔值,表示当前事件是否会向DOM树上层元素冒泡 4 .cancel:表示改事件是否能被取消 5 .composed:表示是否可以穿过Shadow DOM和常规DOM之间的元素进行冒泡 6 .deepPath:一个由事件流所经过的DOM节点组成的数组 7 .defaultPrevented:一个布尔值,表示event.preventdefault方法是否取消了事件的默认行为 8 .timeStamp:事件创建的时间戳. 1 .插件对事件做分类,不同类型的事件的属性也不同 2 .主要有以下几种 3 .SyntheticMouseEvent 就是 SyntheticEvent 的一个派生类，由 ReactDOM 实现。鼠标事件 1 .SyntheticEvent 中有 preventDefault，stopPropagation，persist，isPersistent，destructor 2 .preventDefault 2 .stopPropagation:同样调用了原生事件的 stopPropagation 方法。大家可能发现了，此时事件已经冒泡到 Document 对象上了，调用原生事件的 stopPropagation 已经太晚了，这么做的目的是改变原生事件对象中的一些属性的值，保持两个事件属性值的统一。 同样，使用了 event.cancelBubble = true 的方式来兼容 IE 3 .persist:这个现在已经无效了.React 17之后不在使用事件池了 4 .dectructor:销毁事件属性,将事件的属性置为初始值 1 .React之前将所有的事件都绑定到了document,实际上的React是没有层级的,这样破坏了事件的捕获和冒泡机制 2 .实现原理:具体的做法是，inst 是触发事件的 fiber 对象，从这个 fiber 对象开始，一路向上，直到找到 HostComponent，这样就找到了事件传播的整条路径，然后从根节点自上而下触发 captured，之后自下而上触发 bubbled 1 .SytheticEvent本质上是对nativeEvent的一次封装.目的是为了达到与nativeEvent相同甚至更好的体验基础.保留进一步扩展的可能性,最终实现事件的跨平台 2 .SyntheticEvent 采用派生的方式，将事件具体的属性交由 SyntheticEvent 的子类来实现，自己只维护事件必须的字段 3 .为了避免 SyntheticEvent 对象频繁创建，更好的利用内存资源，提高性能，SyntheticEvent 会将事件对象缓存起来，最大缓存个数是 10 4 . 1 .ES6 Class写法中箭头函数可以不用单独的使用bind方式来绑定this,可以自动绑定 2 .useRef.current.addEventListener(’click’)这样来绑定 3 .尽量避免在React中混用合成事件和原生事件DOM事件.另外用reactEvent.nativeEvent.stopPropagation()来组织冒泡是不行的.阻止React冒泡的行为只能用React合成事件系统中.而且没办法阻止原生事件的冒泡. 4 .相反,原生事件中的阻止冒泡行为,却可以阻止React合成事件的传播 5 .原理:react的合成事件系统仅仅是原生DOM事件系统的一个子集.仅仅实现了DOM level3的事件接口,统一了浏览器的兼容问题

React的diff算法详解

一、什么是diff算法？

为了增强用户体验，React从版本16开始将 同步更新 重构成了 可中断的异步更新 ，即采用了新的Reconciler(协调器，用于找出变化的组件），而新的Reconciler中采用了fiber架构。fiber架构的原理在此不再详细解释，我们目前只需要知道fiber节点可以保存dom信息，fiber节点构成的树叫fiber树，而更新dom是要用到‘双缓存技术’，即比较旧的fiber树与此次要渲染的jsx对象，返回新的fiber树进行渲染。 在旧fiber树与jsx对象比较时，决定哪些节点要复用的过程，就是diff算法 。

由于diff本身也会带来性能消耗，为了降低算法复杂度，React对diff做了 三个预设限制 ：

更新后

如果没有key会走第二条限制，有了key，react就可以判断div和p节点是存在的，可以复用，只需要交换顺序。

diff算法会根据不同的jsx对象执行不同的处理函数，根据jsx对象的不同，我们可以分为两类 ：

1.JSX对象（之后都用newChildren表示）的类型为object、number、string，代表同级只有一个节点 2. newChildren的类型为Array，代表同级有多个节点。

二、单节点diff

对于单节点diff，用一个流程图就可以解释

更新后

由于 key的默认值为null ，所以更新前与更新后满足key相同且元素类型不同，那么我们要删除更新前的三个div节点，新增p节点

三、多节点diff

对于多节点diff, 我们要 遍历newChildren和oldFiber 进行比较。由于React团队发现dom节点一般有更新，增加，删除这三种操作，而更新更为频繁，所以他们设置更新的优先级高于增加删除。基于以上原因，在多节点diff算法的实现中有两层遍历， 第一层遍历处理更新的节点，第二层遍历处理更新以外的节点 。

第一层遍历

遍历newChildren与oldFiber, 判断节点是否可复用，如果可以复用，则继续遍历。 如果不能复用，分为两种情况：

第二层遍历

第二层遍历从第一层遍历的结束位开始 第一层遍历结束后有4种结果

首先我们要判断newChildren中遍历到的节点，在oldFiber中是否存在，基于此，React将oldFiber中的节点以key-oldfiber 键值对的形式存在Map中，只需要newChildren的key，就可以判断oldFiber中有没有相应的节点。

如果oldFiber中没有相应的节点，则将newChildren生成的fiber打上placement标记

如果有相应的节点，将它的索引记为oldIndex，与上一次可复用节点在oldFiber的索引位置lastPlacedIndex比较，如果每次可复用的节点在上一次可复用右边就说明位置没有变化 ，即

若 oldIndex 》=lastPlacedIndex, 说明相对位置没有变化 ，那么令lastPlacedIndex=oldIndex 若 oldIndex《lastPlacedIndex, 代表本节点需要向右移动 。 例如:

参考文档 ： React技术揭秘 (iamkasong.com)

react的fiber为什么快

fiber的性能和作用快。1、首先，react的fiber是一个内部引擎，作用就是使 React 更快、更智能，所以快。2、其次，fiber是react的拆分后的小任务快，所以快。

react渲染原理分析

欢迎进我的 blog 查看更多react相关的文章????

本篇文章作为react源码分析与优化写作计划的第一篇，分析了react是如何创建vdom和fiber tree的。本篇文章通过阅读react 16.8及以上版本源码以及参考大量分析文章写作而成，react框架本身算法以及架构层也是不断的在优化，所以源码中存在很多 legacy 的方法，不过这并不影响我们对于react设计思想的学习和理解。

阅读源码一定要带着目的性的去展开，这样就会减少过程中的枯燥感，而写作能够提炼和升华自己的学习和理解，这也是本篇以及后续文章的动力所在。如果写作的文章还能够帮助到其他开发者，那就更好了。

首先，来看一个简单的 React 组件。

上面常用的语法称之为 JSX，是 React.createElement 方法的语法糖，使用 JSX 能够直观的展现 UI 及其交互，实现关注点分离。

每个 react 组件的顶部都要导入 React，因为 JSX 实际上依赖 Babel（@babel/preset-react）来对语法进行转换，最终生成 React.createElemnt 的嵌套语法。

下方能够直观的看到 JSX 转换后的渲染结果。

createElement() 方法定义如下：

createElement() 接收三个参数，分别是元素类型、属性值以及子元素，它最终会生成 Virtual DOM。

我们将上面的 《App /》 组件内容打印到控制台中。

可以看到 Virtual DOM 本质上是 JS 对象，将节点信息通过键值对的方式存储起来，同时使用嵌套来表示节点间的层级关系。使用 VDOM 能够避免频繁的进行 DOM 操作，同时也为后面的 React Diff 算法创造了条件。现在回到 createElement() 方法，来看一下它究竟是如何生产 VDOM 的。

createElement()方法精简版（v16.8）

首先， createElement() 方法会先通过遍历 config 获取所有的参数，然后获取其子节点以及默认的 props 的值。然后将值传递给 ReactElement() 调用并返回 JS 对象。

值得注意的是，每个 react 组件都会使用 $$typeof 来标识，它的值使用了 Symbol 数据结构来确保唯一性。

到目前为止，我们得到了 VDOM，react通过协调算法（reconciliation）去比较更新前后的VDOM，从而找到需要更新的最小操作，减少了浏览器多次操作DOM的成本。但是，由于使用递归的方式来遍历组件树，当组件树越来越大，递归遍历的成本就越高。这样，由于持续占用主线程，像布局、动画等任务无法立即得到处理，就会出现丢帧的现象。所以，为不同类型的任务赋予优先级，同时支持任务的暂停、中止与恢复，是非常有必要的。

为了解决上面存在的问题，React团队给出了React Fiber算法以及fiber tree数据结构（基于单链表的树结构），而 ReactDOM.render 方法就是实现React Fiber算法以及构建fiber tree的核心API。

render() 方法定义如下：

这里重点从源码层面讲解下 ReactDOM.render 是如何构建fiber tree的。

ReactDOM.render 实际调用了 legacyRenderSubtreeIntoContainer 方法，调用过程以及传参如下：

其中的 element 和 container 我们都很熟悉了，而 callback 是用来渲染完成后需要执行的回调函数。再来看看该方法的定义。

上面是简化后的源码。先来看传参，因为是挂载 root ，所以 parentComponent 设置为 null 。另外一个参数 forceHydrate 代表是否是服务端渲染，因为调用的 render() 方法为客服端渲染，所以默认为 false 。另外 callback 使用少，所以关于它的处理过程就省略了。

因为是首次挂载，所以 root 从 container._reactRootContainer 获取不到值，就会创建 FiberRoot 对象。在 FiberRoot 对象创建过程中考虑到了服务端渲染的情况，并且函数之间相互调用非常多，所以这里直接展示其最终调用的核心方法。

在该方法中 containerInfo 就是 root 节点，而 tag 为 FiberRoot 节点的标记，这里为 LegacyRoot 。另外两个参数和服务端渲染有关。这里使用 FiberRootNode 方法创建了 FiberRoot 对象，并使用 createHostRootFiber 方法创建 RootFiber 对象，使 FiberRoot 中的 current 指向 RootFiber ， RootFiber 的 stateNode 指向 FiberRoot ，形成相互引用。

下面的两个构造函数是展现出了fiberRoot以及rootFiber的部分重要的属性。

FiberRootNode部分属性:

Fiber Node构造函数的部分属性:

最终生成的fiber tree结构示意图如下：

react 并不会比原生操作 DOM 快，但是在大型应用中，往往不需要每次全部重新渲染，这时 react 通过 VDOM 以及 diff 算法能够只更新必要的 DOM。react 将 VDOM 与 diff 算法结合起来并对其进行优化，提供了高性能的 React Diff 算法，通过一系列的策略，将传统的 diff 算法复杂度 O(n^3)优化为 O(n)的复杂度，极大的提升了渲染性能。

这里不展开探究 React Diff 的具体实现原理，而先了解下它到底的基于什么策略来实现的。

基于这三个策略，react 在 tree diff 和 component diff 中，两棵树只会对同层次的节点进行比较。如果同层级的树发生了更新，则会将该节点及其子节点同时进行更新，这样避免了递归遍历更加深入的节点的操作。在后面渲染性能优化部分，对于同一类型的组件如果能够准确的知道 VDOM 是否变化，使用 shouldComponentUpdate 来判断该组件是否需要 diff，能够节省大量的 diff 运算时间。

当 react 进行 element diff 操作中，在元素中添加唯一的 key 来进行区分，对其进行算法优化。所以像大数据量的列表之类的组件中最好添加 key 属性，能够带来一定的性能提升。

React Fiber

随着 React 16 的发布，Hooks 的正式上线，很多小伙伴都很兴奋，都想要尝试这一新的特性，升级 React 的意愿越来越强烈了。

我们都知道 React 是一个优秀的前端框架，很多的大型应用都在使用，而作为使用 React 为工具的开发者也应该了解下 React Fiber，Fiber 到底是什么？它能给我们带来什么？以及 React 团队为什么要去重写 Fiber 架构？

React Fiber 是 React 16 中新的协调引擎，是对核心算法的一次重新实现。

在 React 16 以前，当元素较多，需要频繁刷新的时候页面会出现卡顿，究其原因是因为更新过程是同步的，大量的同步计算任务阻塞了浏览器的渲染。

当页面加载或者更新时，React 会去计算和比对 Virtual DOM，最后绘制页面，整个过程是同步进行的。当 JavaScript 在浏览器的主线程上长期运行，就会阻塞了样式计算、布局和绘制，导致页面无法得到及时的更新和响应。此时，无论用户如何点击鼠标或者敲击键盘都不会得到响应，当 React 更新完成后刚刚点击或敲击的事件才会得到响应。

由于 JavaScript 是单线程的特点，所以一个线程执行完成后才会执行下一个线程，当上一个线程任务耗时太长，程序就会对其他输入不作出响应。

React 的更新过程会先计算，一旦任务开始进行，就无法中断， js 将一直占用主线程， 直到整棵 Virtual DOM 树计算完成之后，才能把执行权交给渲染引擎，而 React Fiber 就是要改变现状。

接下来，让我们具体来了解下 Fiber。

Fiber 把耗时长的任务拆分成很多的小片，每个小片的运行时间很短，每次只执行一个小片，执行完后看是否还有剩余时间，如果有就继续执行下个小片，如果没有就挂起当前任务，将控制权交给 React 负责任务协调的模块，看有没有其他紧急任务要做，如果没有就继续更新当前任务，如果有紧急任务就去做紧急任务，等主线程不忙的时候在继续执行当前任务。

这样唯一的线程不会被独占，其他任务依然有运行的机会。

这种策略叫做 Cooperative Scheduling（合作式调度），操作系统常用任务调度策略之一。

总而言之，我们了解到，Fiber 是一个最小工作单元，也是堆栈的重新实现，可以理解为是一个虚拟的堆栈帧。它将可中断的任务拆分成多个任务，通过优先级来自由调度子任务，分段更新，从而将之前的同步渲染改为异步渲染。

维护每一个分片的数据结构，就是 Fiber，它可以用 JS 对象来表示，其中包含有关组件，以及输入和输出的信息：

上面讲到了任务的执行是根据优先级来调度的，那我们现在具体了解一下优先级。

Fiber Reconciler 决定了当任务调度完成之后，如何去执行每个任务，如何去更新每一个节点的过程。

React Fiber 更新过程分为两个阶段

首次渲染之后 React 会得到一个 Fiber 树，也就是 Current tree（当前树）。当处理更新的时候，React 会构建 WorkInProgress Tree（工作过程树），当构造完成后会将 current 指针指向 WorkInProgress Tree，WorkInProgress Tree 成了新的 Fiber tree。

这被称做双缓冲。以 Fiber tree 为主，WorkInProgress Tree 为辅。

双缓冲技术可以复用内部对象（fiber），节省内存分配、GC的时间开销。

本篇文章篇幅有限，大致讲了 Fiber 的相关知识和 React 的工作流程，对于细节，比如：如何调度任务，如何 diff 等，感兴趣的同学可以自行结合源码研究分析。