React Fiber 原理介绍
欢迎关注我的公众号睿Talk
,获取我最新的文章:
一、前言
在 React Fiber 架构面世一年多后,最近 React 又发布了最新版 16.8.0,又一激动人心的特性:React Hooks 正式上线,让我升级 React 的意愿越来越强烈了。在升级之前,不妨回到原点,了解下人才济济的 React 团队为什么要大费周章,重写 React 架构,而 Fiber 又是个什么概念。
二、React 15 的问题
在页面元素很多,且需要频繁刷新的场景下,React 15 会出现掉帧的现象。请看以下例子:
https://claudiopro.github.io/...
其根本原因,是大量的计算任务阻塞了浏览器的 UI 渲染。默认情况下,JS 运算、页面布局和页面绘制都是运行在浏览器的主线程当中,他们之间是互斥的关系。如果 JS 运算持续占用主线程,页面就没法得到及时的更新。
针对这一问题,React 团队从框架层面对 web 页面的运行机制做了优化,得到很好的效果。
三、解题思路
解决主线程长时间被 JS 运算占用这一问题的基本思路,是将运算切割为多个步骤,分批完成。也就是说在完成一部分任务之后,将控制权交回给浏览器,让浏览器有时间进行页面的渲染。等浏览器忙完之后,再继续之前未完成的任务。为了达到这个效果,需要借助浏览器的requestIdleCallback
这一 API。官方的解释是这样:
window.requestIdleCallback()会在浏览器空闲时期依次调用函数, 这就可以让开发者在主事件循环中执行后台或低优先级的任务,而且不会对像动画和用户交互这样延迟触发而且关键的事件产生影响。函数一般会按先进先调用的顺序执行,除非函数在浏览器调用它之前就到了它的超时时间。
有了解题思路后,我们再来看看 React 具体是怎么做的。
四、React 的答卷
React 框架内部的运作可以分为 3 层:
- Virtual DOM 层,描述页面长什么样。
- Reconciler 层,负责调用组件生命周期方法,进行 Diff 运算等。
- Renderer 层,根据不同的平台,渲染出相应的页面,比较常见的是 ReactDOM 和 ReactNative。
这次改动最大的当属 Reconciler 层了,React 团队也给它起了个新的名字,叫Fiber Reconciler
。这就引入另一个关键词:Fiber。
Fiber 其实指的是一种数据结构,它可以用一个纯 JS 对象来表示:
const fiber = {stateNode, // 节点实例child, // 子节点sibling, // 兄弟节点return, // 父节点
}
为了加以区分,以前的 Reconciler 被命名为Stack Reconciler
。Stack Reconciler 运作的过程是不能被打断的,必须一条道走到黑:
而 Fiber Reconciler 每执行一段时间,都会将控制权交回给浏览器,可以分段执行:
为了达到这种效果,就需要有一个调度器 (Scheduler) 来进行任务分配。任务的优先级有六种:
- synchronous,与之前的Stack Reconciler操作一样,同步执行
- task,在next tick之前执行
- animation,下一帧之前执行
- high,在不久的将来立即执行
- low,稍微延迟执行也没关系
- offscreen,下一次render时或scroll时才执行
优先级高的任务(如键盘输入)可以打断优先级低的任务(如Diff)的执行,从而更快的生效。
Fiber Reconciler 在执行过程中,会分为 2 个阶段。
- 阶段一,生成 Fiber 树,得出需要更新的节点信息。这一步是一个渐进的过程,可以被打断。
- 阶段二,将需要更新的节点一次过批量更新,这个过程不能被打断。
阶段一可被打断的特性,让优先级更高的任务先执行,从框架层面大大降低了页面掉帧的概率。
五、Fiber 树
Fiber Reconciler 在阶段一进行 Diff 计算的时候,会生成一棵 Fiber 树。这棵树是在 Virtual DOM 树的基础上增加额外的信息来生成的,它本质来说是一个链表。
Fiber 树在首次渲染的时候会一次过生成。在后续需要 Diff 的时候,会根据已有树和最新 Virtual DOM 的信息,生成一棵新的树。这颗新树每生成一个新的节点,都会将控制权交回给主线程,去检查有没有优先级更高的任务需要执行。如果没有,则继续构建树的过程:
如果过程中有优先级更高的任务需要进行,则 Fiber Reconciler 会丢弃正在生成的树,在空闲的时候再重新执行一遍。
在构造 Fiber 树的过程中,Fiber Reconciler 会将需要更新的节点信息保存在Effect List
当中,在阶段二执行的时候,会批量更新相应的节点。
六、总结
本文从 React 15 存在的问题出发,介绍 React Fiber 解决问题的思路,并介绍了 Fiber Reconciler 的工作流程。从Stack Reconciler
到Fiber Reconciler
,源码层面其实就是干了一件递归改循环的事情,日后有机会的话,我再结合源码作进一步的介绍。
React Fiber 原理介绍相关推荐
- React系列——React Fiber 架构介绍资料汇总(翻译+中文资料)
原文 react-fiber-architecture 介绍 React Fibre是React核心算法正在进行的重新实现.它是React团队两年多的研究成果. React Fiber的目标是提高其对 ...
- React Fiber 原理
持续学习中- 源码版本: v17.0.1, 官方源码地址 源码调试教程 调试的源码 画图软件 浏览器的一帧 浏览器中, 页面都是一帧一帧的绘制出来的, 渲染的帧率和设备的刷新率是一致的, 以常用的显示 ...
- React Fiber 原理实现
react16之前的问题 react16之前dom元素的更新采用递归遍历的方式来对比子节点.一旦进入到递归遍历,整个过程将不能被打断,如果dom树的层次比较深,整个对比过程将耗时较长.而js的运行和d ...
- React Fiber原理
fiber是react16之后引入的一种调度算法,为了性能优化,16版本之前在创建虚拟dom渲染到页面是递归遍历渲染的,不能被打断,16之后引入了Fiber,思想是将任务分成很多小任务,在每个小任务执 ...
- React Fiber详解
问题是什么? 我们先看一个例子: https://claudiopro.github.io/react-fiber-vs-stack-demo/stack.html 在上面这张图片中,页面出现一卡一卡 ...
- React Fiber架构原理剖析
一.概述 在 React 16 之前,VirtualDOM 的更新采用的是Stack架构实现的,也就是循环递归方式.不过,这种对比方式有明显的缺陷,就是一旦任务开始进行就无法中断,如果遇到应用中组件数 ...
- React Fiber架构原理
一,概述 在 React 16 之前,VirtualDOM 的更新过程是采用 Stack 架构实现的,也就是循环递归方式.这种对比方式有一个问题,就是一旦任务开始进行就无法中断,如果应用中组件数量庞大 ...
- 六个问题让你更懂 React Fiber
作者 | 零一0101 来源 | 前端印象 React Fiber 是Facebook花费两年余时间对 React 做出的一个重大改变与优化,是对 React 核心算法的一次重新实现.从Faceboo ...
- 这可能是最通俗的 React Fiber 打开方式
作者:荒山 https://juejin.im/post/5dadc6045188255a270a0f85 温馨提示:由于 wx 外链限制,文中外链请点击阅读原文查看. 写一篇关于 React Fib ...
最新文章
- hdu 4252(单调栈)
- C实现二叉树的先序遍历,中序遍历,后序遍历
- Java依赖注入选项
- 计算机dos通讯,PC双机通信DOS
- C++学习——构造函数,析构函数与虚函数关系
- PHP获取字符串的所有子集,PHP Regexp(PCRE)-查找所有子字符串的集合
- 星巴克“猫爪杯”遭国人疯抢 而 “大白兔冰淇淋”在美国大火
- System Verilog 线程间的通信——事件,信箱与旗语
- HDU1328 ZOJ1240 IBM Minus One【水题】
- 微信小程序开发入门篇
- SQL Server 2008空间数据应用系列十:使用存储过程生成GeoRSS聚合空间信息
- Edraw的深化使用画网络拓扑图
- python 爬取全国统计用区划代码和城乡划分代码
- 万用表如何进行欧姆校零
- sklearn中的数据预处理和特征工程
- 【吐血推荐】什么是领域驱动设计?DDD?
- 论文写作 之 Related work
- echarts地图功能实现及坐标定位
- jupyter修改工作路径提示找不到指定模块
- 计算机硬盘写入错误怎么办,永劫无间磁盘写入错误怎么办 磁盘写入错误解决办法...