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 在状态变化时自动且只重新渲染必要部分的方案。
    • ...
相关推荐
lbh6 小时前
当我开始像写代码一样和AI对话,一切都变了
前端·openai·ai编程
We་ct7 小时前
LeetCode 918. 环形子数组的最大和:两种解法详解
前端·数据结构·算法·leetcode·typescript·动态规划·取反
wefly20178 小时前
m3u8live.cn 在线M3U8播放器,免安装高效验流排错
前端·后端·python·音视频·前端开发工具
C澒8 小时前
微前端容器标准化 —— 公共能力篇:通用打印
前端·架构
德育处主任Pro8 小时前
前端元素转图片,dom-to-image-more入门教程
前端·javascript·vue.js
木斯佳8 小时前
前端八股文面经大全:小红书前端一二面OC(下)·(2026-03-17)·面经深度解析
前端·vue3·proxy·八股·响应式
陈天伟教授9 小时前
人工智能应用- 预测新冠病毒传染性:04. 中国:强力措施遏制疫情
前端·人工智能·安全·xss·csrf
zayzy9 小时前
前端八股总结
开发语言·前端·javascript
今天减肥吗9 小时前
前端面试题
开发语言·前端·javascript
Rabbit_QL9 小时前
【前端UI行话】前端 UI 术语速查表
前端·ui·状态模式