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: 主要生命周期的改变。

  • 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 在状态变化时自动且只重新渲染必要部分的方案。
    • ...
相关推荐
杨进军3 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW18 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字24 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript