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 在状态变化时自动且只重新渲染必要部分的方案。
    • ...
相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架