当前位置: 首页 > news >正文

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 在状态变化时自动且只重新渲染必要部分的方案。

相关文章:

  • GIS与Python机器学习:开创地质灾害风险评价新纪元
  • 精品凉拌菜系列热卤系列课程
  • HarmonyOS 应用开发案例
  • Python学习之-基础语法
  • 一文搞懂大疆机场kmz航线和图新地球导出的kmz的区别
  • 音视频处理 - 音频概念详解,码率,采样率,位深度,声道,编码
  • XGB-24:使用Scikit-Learn估计器接口
  • Python中lambda函数使用方法
  • Java | 自由落体与反弹距离计算
  • mysql的单表、多表查询和数据类型
  • Mysql中的执行计划怎么分析?
  • RHCE-网络服务实验1
  • git patch的使用方法
  • spring.factories
  • 大数据Hadoop入门04 ——【HDFS shell操作】
  • Apache的基本使用
  • ECS应用管理最佳实践
  • flutter的key在widget list的作用以及必要性
  • Perseus-BERT——业内性能极致优化的BERT训练方案
  • Python - 闭包Closure
  • 笨办法学C 练习34:动态数组
  • 简单数学运算程序(不定期更新)
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 通过获取异步加载JS文件进度实现一个canvas环形loading图
  • 一个SAP顾问在美国的这些年
  • ​TypeScript都不会用,也敢说会前端?
  • ​一文看懂数据清洗:缺失值、异常值和重复值的处理
  • ###51单片机学习(1)-----单片机烧录软件的使用,以及如何建立一个工程项目
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • $redis-setphp_redis Set命令,php操作Redis Set函数介绍
  • (附源码)spring boot儿童教育管理系统 毕业设计 281442
  • (附源码)基于SSM多源异构数据关联技术构建智能校园-计算机毕设 64366
  • (蓝桥杯每日一题)love
  • (学习日记)2024.01.09
  • (转载)在C#用WM_COPYDATA消息来实现两个进程之间传递数据
  • (轉貼)《OOD启思录》:61条面向对象设计的经验原则 (OO)
  • .NET Core IdentityServer4实战-开篇介绍与规划
  • .net6使用Sejil可视化日志
  • .NET设计模式(11):组合模式(Composite Pattern)
  • /3GB和/USERVA开关
  • @SuppressWarnings(unchecked)代码的作用
  • @transaction 提交事务_【读源码】剖析TCCTransaction事务提交实现细节
  • [20170728]oracle保留字.txt
  • [AIGC 大数据基础]hive浅谈
  • [BT]BUUCTF刷题第8天(3.26)
  • [BZOJ 4598][Sdoi2016]模式字符串
  • [c++] 什么是平凡类型,标准布局类型,POD类型,聚合体
  • [CUDA手搓]从零开始用C++ CUDA搭建一个卷积神经网络(LeNet),了解神经网络各个层背后算法原理
  • [C语言]——柔性数组
  • [halcon案例2] 足球场的提取和射影变换
  • [HCTF 2018]WarmUp (代码审计)
  • [HITCON 2017]SSRFme perl语言的 GET open file 造成rce
  • [JavaWeb]——过滤器filter与拦截器Interceptor的使用、执行过程、区别
  • [PHP]加密解密函数