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