react15与react16的本质区别

React 15 和 React 16 在架构和一些核心特性上存在本质性的区别。

1.Reconciliation(协调)算法:

  • React 15: React 15 使用了递归的协调算法,即采用深度优先遍历整个组件树来协调更新。这种方式在处理大型组件树或深度嵌套组件时可能导致性能问题。
  • React 16: React 16 引入了 Fiber 架构,使用了一种更灵活的协调算法。Fiber 架构的核心思想是将协调过程拆分成可中断的小任务单元,允许在渲染过程中中断和恢复,以更好地响应用户输入,提高性能。

React Fiber 架构:

  • React Fiber 架构是 React 16 引入的一种新的协调引擎,它重新设计了 React 的核心算法,提供了更灵活的调度和渲染机制。Fiber 架构的目标是改善 React 在大型应用中的性能,同时提供更好的用户体验和交互响应性。
  • 以下是 React Fiber 架构的一些关键特性和概念:
  • 1. Fiber 节点:在 Fiber 架构中,每个 React 元素都对应一个 Fiber 节点。Fiber 节点是一个轻量的 JavaScript 对象,用于描述 React 元素的信息,例如元素的类型、属性、子元素等。
  • 2. 协调:Fiber 架构引入了新的协调机制,通过协调器(Reconciler)来处理元素的更新和渲染。协调器使用一种深度优先遍历的算法来协调和调度 Fiber 节点,使得 React 能够更加灵活地处理更新和渲染的优先级。
  • 3. Fiber 树:Fiber 架构中的元素被组织成一个 Fiber 树。与传统的递归调度不同,Fiber 树的节点可以在不同时间点暂停、中断和恢复。这使得 React 能够在渲染时对任务进行切片,提高对用户输入的响应速度。
  • 4. 时间片(Time Slicing):Fiber 架构引入了时间片的概念,将任务切分成小的时间片单元。这使得浏览器能够在每个时间片之间进行中断,执行其他任务,提高页面的交互响应性。
  • 5. 异步渲染: Fiber 架构支持异步渲染,可以将渲染工作分散到多个帧中,避免一次性渲染大量元素导致的卡顿。异步渲染使得 React 能够更好地适应复杂的应用场景,提高了整体的性能。
  • 6. 优先级调度: Fiber 架构引入了优先级调度的概念,通过任务的优先级来决定任务的执行顺序。这允许 React 在处理高优先级任务时能够更快地响应用户输入,同时在处理低优先级任务时避免阻塞主线程。
  • 7. 增量渲染:Fiber 架构支持增量渲染,可以在每个时间片中只更新发生变化的部分,而不是整体重新渲染。这减少了不必要的计算和 DOM 操作,提高了渲染的效率。
  • 总的来说,React Fiber 架构是为了解决在大型应用中渲染性能和用户体验问题而引入的。它通过重新设计协调机制、引入时间片和优先级调度等特性,使得 React 能够更加灵活地处理复杂的更新和渲染任务,提高了整体的性能和响应速度。

时间片:

时间片(Time Slicing)是 React 16 引入的一项特性,旨在提高应用在处理大型任务时的性能和用户体验。时间片将任务分割成小块,使得浏览器能够在每个时间片之间进行中断,从而更好地响应用户输入和保持页面的流畅性。

时间片的主要目标是解决两个问题:

1. 用户交互响应性:在进行大型渲染任务时,如果一直占用主线程,可能会导致页面在渲染完成之前无法响应用户的输入,造成页面卡顿和交互迟滞。

2. 动画和滚动卡顿:当页面中有大量的 DOM 元素需要渲染时,如果一次性渲染所有元素,可能导致动画和滚动的卡顿,影响用户体验。

时间片通过将任务切分成小的时间片单元,允许浏览器在每个时间片之间进行中断,执行其他任务,如处理用户输入或执行高优先级的代码。这样,即使有大型任务在进行,浏览器也能够更及时地响应用户的输入和保持页面的流畅性。

时间片的作用包括:

1. 更好的用户体验:通过将渲染任务分解成小块,可以更好地响应用户输入,提高页面的交互响应性。

2. 减轻主线程压力: 时间片允许浏览器在每个时间片之间进行中断,执行其他任务,减轻了主线程的压力,提高了页面的性能。

3. 避免卡顿:在动画和滚动等场景下,时间片的引入可以避免一次性渲染大量元素导致的卡顿问题,提高了流畅度。

那是不是就说明react15是单线程,react16是多线程的呢?

不是:

React 15 及之前的版本是单线程的,它使用了浏览器的事件循环(event loop)来处理用户交互和更新渲染。在 React 15 中,更新是通过递归方式同步执行的,一旦开始更新,就会一直递归遍历组件树,直到所有组件都完成渲染。这样的机制可能会导致在更新较大的组件树时,主线程被长时间占用,造成页面卡顿。

React 16 及 React 17 引入了 Scheduler 模块和异步渲染的概念,但仍然是在主线程上执行的。这并不是说 React 变成了多线程框架,而是通过优先级调度和异步渲染的方式,更好地利用了主线程的时间片,提高了对用户交互的响应速度,减少了卡顿的可能性。

2.React Fiber 架构:

  • React 15: 使用了递归更新的方式,可能在大型应用或复杂更新场景下性能受限。
  • React 16: 引入了 Fiber 架构,提供了更灵活的调度和渲染机制,支持时间片切割、异步渲染、增量渲染等特性,以提高性能和用户体验。

3.React Portals:

  • React 15: 不支持 React Portals,这是 React 16 引入的一项新特性,允许将子组件渲染到 DOM 结构中的不同位置。
  • React 16: 引入了 createPortal API,使得开发者可以在组件树之外渲染子组件,从而更灵活地管理组件的渲染位置。

这些改进使得 React 在性能、可维护性和用户体验方面都取得了显著的提升。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637703.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试官:如何实现三栏布局,中间自适应

今天聊点简单的,最近在整理面试题的时候,看到css部分,感觉自己有段时间没有切页面了,正好趁着这个机会好好复习一下,加深一下印象。 如何实现三栏布局 中间自适应?这也是在前端面试官经常会问到的&#xf…

unity 利用Graphics.Blit来制作图片效果

c# 的代码 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class GraphicsBlitTest : MonoBehaviour {public Texture2D source;//原纹理public Material material;//效果材质public RawImage rawImage;// Sta…

前端实现轮训和长连接

简介 轮训和长连接相关内容可以参考之前的文章消息推送系统。消息推送系统-CSDN博客文章浏览阅读106次。在餐饮行业中,店内应用有pos、厨显屏等,云端应用为对应数据中心。为了实现云端数据和操作指令下发到店内应用,需要有一个系统实现这个功…

【手写数据库toadb】01 开发数据库内核准备阶段-开发环境准备

开发环境 ​专栏内容: 手写数据库toadb 本专栏主要介绍如何从零开发,开发的步骤,以及开发过程中的涉及的原理,遇到的问题等,让大家能跟上并且可以一起开发,让每个需要的人成为参与者。 本专栏会定期更新,对应的代码也会定期更新,每个阶段的代码会打上tag,方便阶段学习…

配置DNS主从服务器,实现真反向解析

主服务器 [rootbogon ~]# systemctl stop firewalld.service #关闭防火墙 [rootbogon ~]# setenforce 0 #关闭selinux [rootbogon ~]# systemctl restart named #启动dns服务 [rootbogon ~]# vim /etc/named.conf #进入dns配置文件 options {#监听…

udp丢包处理方法

UDP丢包处理方法如下1: 使用前向纠错码(FEC)技术。通过在发送端添加冗余信息,使接收端能够在收到部分丢失的数据时进行纠错。 使用前向纠错码(FEC)技术是一种有效的处理UDP丢包的方法。FEC技术通过在发送…

【ARM 嵌入式 编译系列 2.4 -- GCC 编译参数学习 -Wl,--gc-sections 】

请阅读【嵌入式开发学习必备专栏 之 ARM GCC 编译专栏】 文章目录 概述-Wl 选项例子: --gc-sections --gc-sections例子: -Wshadow例子: -Wlogical-op例子: -Waggregate-return例子: -Wfloat-equal例子: -W…

2023年12月 电子学会 青少年软件编程等级考试Scratch三级真题

202312 青少年软件编程等级考试Scratch三级真题 一、单项题 第 1 题 运行左图程序,想得到右图中的效果,红色框应填写的数值是?( ) A:12 B:11 C:10 D:9 第 2 题 下列…

每天都美好的一天

每天我们都会遇到不同的事情,开心的、愤怒的、悲伤的等等,今天过完明天我们还得继续,所以一切又显得不那么重要。一天中如果有不开心的事情发生会影响我们当天很长一段时间,甚至未来几天。 今天所做之事都是自己明天的基础&#…

修改live server的默认浏览器(vscode)

在插件打开设置 修改选定浏览器

VC++中使用OpenCV进行颜色检测

VC中使用OpenCV进行颜色检测 在VC中使用OpenCV进行颜色检测非常简单,首选读取一张彩色图像,并调用函数cvtColor(img, imgHSV, COLOR_BGR2HSV);函数将原图img转换成HSV图像imgHSV,再设置好HSV三个分量的上限和下限值,调用inRange函…

C++实现一个简单的学生管理系统

目录 1.一个简单的学生管理系统简介 2.定义一个 Student 类 2.1用于表示学生信息。 3.定义一个 StudentManager 类 3.1用于管理学生信息。 4.在 main 函数中 4.1使用上述两个类来实现一个简单的学生管理系统 5.C类模板 推荐阅读: calloc与realloc和malloc的…

多线程(看这一篇就够了,超详细,满满的干货)

多线程 一.认识线程(Thread)1. 1) 线程是什么1. 2) 为啥要有线程1.3) 进程和线程的区别标题1.4) Java的线程和操作系统线程的关系 二.创建线程方法1:继承Thread类方法2:实现Runnable接口方法3:匿名内部类创建Thread子类对象标题方法4:匿名内部类创建Runn…

MySQL TINYINT(1)和TINYINT(2)有什么区别?

文章目录 1.直接建表2.查询数据3.总结 身为程序员,拿事实说话拿代码说话最直观了,show the code 1.直接建表 CREATE TABLE tinyinttest (id int NOT NULL,a TINYINT(1) NOT NULL DEFAULT 0,b TINYINT(2) NOT NULL DEFAULT 0,c TINYINT(1) ZEROFILL NOT…

JSON 基本语法以及在Java 中的使用

文章目录 一、JSON 概述1.1 什么是 JSON1.2 JSON数据类型和语法1.3 JSON 优势 二、使用 JSON2.1 在 Java程序中使用 JSON2.2 Jackson的使用2.2.1 Jackson的简单介绍2.2.2 反序列化2.2.3 序列化 参考资料 一、JSON 概述 1.1 什么是 JSON JSON(JavaScript Object No…

Unity下实现跨平台的RTMP推流|轻量级RTSP服务|RTMP播放|RTSP播放低延迟解决方案

2018年,我们开始在原生RTSP|RTMP直播播放器的基础上,对接了Unity环境下的低延迟播放,毫秒级延迟,发布后,就得到了业内一致的认可。然后我们覆盖了Windows、Android、iOS、Linux的RTMP推送、轻量级RTSP服务和RTSP|RTMP播…

VRRP协议负载分担

VRRP流量负载分担 VRRP负载分担与VRRP主备备份的基本原理和报文协商过程都是相同的。同样对于每一个VRRP备份组,都包含一个Master设备和若干Backup设备。与主备备份方式不同点在于:负载分担方式需要建立多个VRRP备份组,各备份组的Master设备可以不同;同一台VRRP设备可以加…

ctfshow信息收集(web1-web20)

目录 web1 web2 web3 web4 web5 web6 web7 web9 web10 web11 web14 web15 web16 web17 web18 web19 web20 web1 根据提示的孩子开发的时候注释没有被及时删除 web2 js原因无法查看源代码 第一种方法 在url前加入 view-source: 会显示页面源代…

【车载HMI开发工具--EB GUIDE 与 Unity 合作提供一体化的沉浸式 HMI 设计开发工具链】【转载】

随着车载高性能计算平台的日益普及以及显示器尺寸和数量的不断增加,沉浸式车载人机交互界面(HMI)的需求也在持续增长。为了将实时 3D 技术带入车载 HMI 领域,Unity 与 Elektrobit (EB)展开了合作,EB 是推进 HMI 功能安…

数据分析完整流程一般包括哪几个环节/步骤

问题定义: 确定需要解决的问题或目标,明确分析的方向和目的。 数据收集: 收集与问题相关的数据,可以包括从各种来源获取的结构化或非结构化数据。 数据清洗: 对收集到的数据进行清理,处理缺失值、异常值和…