react15与16版本的区别是什么-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

react15与16版本的区别是什么

这篇文章主要介绍“react15与16版本的区别是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react15与16版本的区别是什么”文章能帮助大家解决问题。

为沙坡头等地区用户提供了全套网页设计制作服务,及沙坡头网站建设行业解决方案。主营业务为成都网站设计、成都做网站、沙坡头网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

不同:1、15版本架构分为协调器和渲染器两部分,而16版本架构分为调度器、协调器和渲染器三个部分;2、15版本的reconciler是采用递归形式工作是同步的,而16版本的reconciler采用的是异步可中断更新代替15版本的同步更新。

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react15与16版本的不同是什么

一.react15的架构可以分为两层:

Reconciler(协调器)— 找出需要更新的组件,以及标识出如何更新

Renderer(渲染器)— 负责将变化后的组件渲染到页面上

二.react16的架构可以分为三层:

Scheduler(调度器)— 调度任务的优先级,高级优先级的优先进入Reconciler阶段

Reconciler(协调器)— 找出需要更新的组件,以及标识出如何更新

Renderer(渲染器)— 负责将变化后的组件渲染到页面上

说在前头:

浏览器的16.6ms机制

对人眼来说,正常流畅的刷新率为60hz,即60帧,即浏览器16.6ms刷新一次。

我们知道js可以操作dom元素,所以浏览器的GUI线程和js线程是互斥的。js的执行和浏览器的绘制、布局不能同时进行。所以在每16.6ms内浏览器要执行如下操作:

JS脚本执行 ------ 浏览器样式布局 ------ 浏览器样式绘制

如果js脚本执行时间过长,超过16.6ms,这次刷新中浏览器绘制和布局就无法执行,这就会造成人眼可识别的卡顿,发现操作时浏览器没有“实时”做出反应。如:对于用户在输入框输入内容这个行为来说,就体现为按下了键盘按键但是页面上不实时显示输入。

15和16区别

react15的reconciler是stack-reconciler。即是采用递归形式工作的,是同步的,在生成虚拟dom树并diff过程中是无法中断的。这样在组件层级过深时,会造成js执行时间过长,浏览器无法布局和绘制,造成丢帧。

react16的reconciler是fiber-reconciler。即采用的异步可中断更新代替react15的同步更新,react16的scheduler调度器会告诉reconciler,浏览器是否有空闲时间执行js脚本。这样就不会影响浏览器的绘制和布局工作。不会丢帧。

在react16中,原来的虚拟DOM,因其结构已不能满足异步可中断更新的需求,改而采用新的结构Fiber。虚拟dom节对应变为Fiber节点,虚拟dom树对应变为Fiber树。

关于“react15与16版本的区别是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


文章标题:react15与16版本的区别是什么
浏览地址:http://kswsj.cn/article/ieogie.html

其他资讯