React系列之React版本时间线和主要更新

参考: https://github.com/facebook/react/releases + 一些博客文章

React 起源于 Facebook 的内部项目,在 2013 年开源正式推出。

  • 2016.4 React15: 之前都是 v0.xx,到这时候直接变成 v15,可见对这个库的重视和发展意图。

    • 初始渲染使用 document.createElement 而不是生成大量 HTML 字符串再通过 node.innerHTML 设置。这样做可以提高 React 的性能。
    • 等等内容,具体可以点上面链接看,主要还是在构建这个库的完整性和底层效率。
  • 2017.9 React16.0: 主要是引入了异步渲染和 React Fiber,提高了渲染性能。

    • 在 React15 的时候架构层分为 Reconciler(协调器)负责找出变化的组件和 Renderer(渲染器)负责将变化的组件渲染到页面上,更新是同步的,一旦开始更新直到页面渲染前都不能中断。在 React16 中加入 Scheduler(调度器)负责调度任务的优先级,高优任务优先进入 Reconciler。
    • Fiber 的引入将原本的同步更新过程碎片化,避免主线程的长时间阻塞,使应用的渲染更加流畅。具体可看这篇:
  • 2018.3 React16.3: 主要生命周期的改变。

    • 生命周期见这篇:React系列之新旧生命周期对比
    • 支持 context API、React.createRef() 等等API。改进了错误处理等。
  • 2019.2 React16.8: 主要引入了 Hooks。

    • 引入了 Hooks,改变了函数组件的写法,提供了一种新的状态管理和副作用处理方式。具体看这篇:React系列之常用ReactHook
  • 2020.10 React17: 过度版本。

    • 没有 API 修改,也就是没有用户可见的新特性。主要关注于平滑迁移和新特性的稳定性。
    • React v17将支持渐进式更新策略。说白了,从React v17后,如果你在项目中同时使用两个版本的React时,将不会出现任何问题。这将更有利于进行老项目的迁移和升级。官方还给出了一个渐进式更新的的例子:https://github.com/reactjs/react-gradual-upgrade-demo/
    • 内部机制是有更新的,https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html 比如,事件系统就进行了调整。React 事件见这篇:todo。
  • 2022.3 React18:

    • setState 自动批处理。在数据层,将多个状态更新批量处理,合并成一次更新。即使我们更新了两个状态,每次更新组件也只渲染一次。之前只有在 react 事件处理函数中,才会自动执行批处理,其它情况会多次更新。在 18 之后,任何情况都会自动执行批处理,多次更新始终合并为一次。(如果想关闭自动批处理,可以使用 flushSync 包裹状态更新函数,但是官方不建议这么做)
    • Concurrent Mode 并发渲染模式。在 React 17 中就可以通过一些试验性的 api 开启 CM。它本身并不是一个功能,而是一个底层设计。在 Concurrent 模式中,可以同时更新多个状态,渲染可以被中断和继续,也有优先级。从同步不可中断更新变成了异步可中断更新。
    • Transitions,控制渲染优先级。提供两个 api, useTransition(hook) 和 startTransition,如果需要标记哪些渲染是低优先级的,可以用上述 api 包裹,对于有大量渲染的情况可以区别处理。
    • Suspense, 同时需要请求多个 api 的页面。Suspense 提供了一种统一的机制,使得组件可以等待异步操作的完成,并在数据加载过程中展示 loading 状态,而不需要在每个异步组件中手动管理 loading 状态。
  • 2024.? React19

    • 可能会有新编译器,在使用新编译器以前,我们使用 useMemo、useCallback 和 memo 来手动缓存状态,以减少不必要的重新渲染,这种实现方式虽然可行,但 React 团队认为这并不是他们认为理想的方式,他们一直寻找让 React 在状态变化时自动且只重新渲染必要部分的方案。

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

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

相关文章

大数加法C++实现

题目:假设输入是2个数字,可能超过long long类型能表示的范围,请输出两数相加的运算结果。 思路:2个数输入的时候,肯定都是用string存的,先将短的数在末尾补0,使得二者一样长。然后挨个位相加&am…

单链表交叉分离,运用头插法,尾插法(算法库应用)

原文博客链接:单链表分离(头插法和尾插法的结合,理解指针变换)_3.对任务1或者2中创建的某一个单链表{a1,b1,a2,b2,...,an,bn},编写一个算法将-CSDN博客 函数实现: /************************************************** 函数名:separate_LinkList 功 能: 把一个链表,交叉新建…

电机控制杂谈——永磁同步电机中的永磁体谐波反电势

1.问题的引出 在我的谐波抑制专题中,讲了三种谐波抑制的策略。当时是通过增大逆变器死区来产生较大的谐波。但是在实际电机里面,我感觉死区的影响基本上没有。。。课题组的驱动器中,逆变器的非线性其实基本可以忽略不计了。 但是&#xff0…

怎么配置Dubbo的容错机制?

Dubbo的容错机制用于处理在分布式环境中可能出现的故障和异常情况,以保障系统的稳定性和可靠性。Dubbo提供了多种容错机制,可以根据实际情况进行配置。以下是几种常见的容错机制及其适用场景: Failover(重试)&#xff…

langchin-chatchat部分开发笔记(持续更新)

大模型相关目录 大模型,包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步,扬帆起航。 大模型应用向开发路径及一点个人思考大模型应用开发实用开源项目汇总大模型问答项目…

Spring MVC Thymeleaf在一个表单中的多个提交按钮

今天遇见一个form需要两个button提交显示不同Controller的需求 一开始解决思路&#xff1a; 我有一个HTML页面的一个窗体和2个按钮的片段&#xff1a; <form action"#" data-th-action"{/action/edit}" data-th-object"${model}" method&qu…

JS获取本机IP地址的2种方法

目录 1.获取本机IP地址方法1&#xff1a;2.获取本机IP地址方法2解决方案&#xff1a; 1.获取本机IP地址方法1&#xff1a; if(typeof window ! undefined){var RTCPeerConnection window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnectio…

SpringBoot中处理校验逻辑的两种方式:Hibernate Validator+全局异常处理

最近正在开发一个校园管理系统&#xff0c;需要对请求参数进行校验&#xff0c;比如说非空啊、长度限制啊等等&#xff0c;可选的解决方案有两种&#xff1a; 一种是用 Hibernate Validator 来处理一种是用全局异常来处理 两种方式&#xff0c;我们一一来实践体验一下。 一、…

AXI4-Stream Interconnect IP核(1)——原理

一、概述 AXI4-Stream Interconnect 是复杂片上系统&#xff08;SoC&#xff09;和现场可编程门阵列&#xff08;FPGA&#xff09;应用设计中的关键组件&#xff0c;它负责在系统内部不同模块之间路由数据流。AXI4-Stream协议是ARM引入的AMBA&#xff08;高级微控制器总线架构&…

httpClient使用介绍

HttpClient 是Apache Jakarta Common 下的子项目&#xff0c;可以用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包&#xff0c;并且它支持 HTTP 协议最新的版本和建议。 就是用来发送http请求或者解析http响应的。 导入依赖&#xff1a; <dependency…

插入排序和希尔排序:

插入排序 1. 算法思想&#xff1a; 由数组下标为1 开始的数值作为判断依据&#xff0c;与之前的数据从后往前比较定义tmp 暂存判断的数值&#xff0c;若前面的数据大于tmp&#xff0c;则将前面的数据向后移动 : arr[j1]arr[j]若对比的数据比tmp 大&#xff0c;则往后移&#…

Mysql中的执行计划怎么分析?

一、背景 在我们日常工作中&#xff0c;我们可能会遇到一些慢SQL语句或者要对一些SQL进行性能优化&#xff0c;那么就需要使用explain对SQL进行执行计划分析了。Mysql中的执行计划可以通过EXPLAIN或DESCRIBE关键字获取&#xff0c;当我们拿到执行计划后可以帮助我们分析这条sq…

JavaIO流与字节输出流OutputStream

1 概述 1.1 什么是IO流 IO流是存储和读取数据的解决方案&#xff0c;用于读写文件中的数据&#xff08;包括本地文件、网络等&#xff09; IO流的参照是程序或内存&#xff0c;即使程序在读&#xff0c;程序在写。 1.2 IO的分类 根据流的方向分为&#xff1a;输入流和输出流…

C++STL学习之unordered_map与unordered_set(底层Hash)

前言&#xff1a;我们前面已经学习论map和set&#xff0c;现在又冒出来一个unordered_map和unordered_set&#xff0c;这两个有啥差别吗&#xff1f;前面我们已经说过&#xff0c;map和set的底层是红黑树&#xff0c;那unordered_map和unordered_set的底层是什么呢&#xff1f;…

入门指南:使用Spark MLlib进行数据处理和机器学习

引言&#xff1a; 在当今大数据时代&#xff0c;数据处理和机器学习成为了许多企业和数据科学家的核心任务。然而&#xff0c;处理大规模数据和训练复杂的机器学习模型并不容易。幸运的是&#xff0c;Apache Spark提供了一个强大的机器学习库&#xff0c;即Spark MLlib&#xf…

esp32CAM环境搭建(arduino+MicroPython+thonny+固件)

arduino ide 开发工具 arduino版本&#xff1a;1.8.19 arduino ide 中文设置&#xff1a;​ file >> preferences >> ​ arduino IDE 获取 ESP32 开发环境&#xff1a;打开 Arduino IDE &#xff0c;找到 文件>首选项 ,将 ESP32 的配置链接填入附加开发板管理网…

TypeScript实战使用技巧分享

TypeScript使用分享 前言 本次技术分享是想将自己使用TypeScript&#xff08;TS&#xff09;的经验给大家做一个技术分享。主要目的是分享我使用TS的方式或者习惯&#xff0c;以及怎么在项目中更好的使用它&#xff0c;而不是对TS这门语言的学习。并非说需要大家都去这样写&a…

python --dejavu音频指纹识别

Dejavu是一个用于音频指纹识别的Python库&#xff0c;它能够将音频文件转换成独特的指纹&#xff0c;然后通过比对数据库中已知音频的指纹&#xff0c;识别出输入音频的来源或相似音频。Dejavu库支持多种类型的音频文件&#xff0c;包括MP3、WAV等&#xff0c;同时也支持在不同…

【Canvas与艺术】简约式胡萝卜配色汽车速度表

【效果图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>胡萝卜色汽车速度仪表盘简化版</title><style type"…

go |struct embedding、generics、goroutine

go 的结构内嵌 注意点&#xff0c;有点像js func main() {fmt.Println("hello zhangbuda...")// 这个内嵌 和 js 有点像co : container{base: base{num: 22,},str: "zhangdbau hahahahah ",}fmt.Println("co: ", co)/*在 Go 语言中&#xff0c;如…