Wepress

Appearance

不同版本的 React 都做过哪些优化？ ​

参考答案： ​

React渲染页面的两个阶段：

  • 调度阶段（reconciliation）：在这个阶段 React 会更新数据生成新的 Virtual DOM，然后通过Diff算法，快速找出需要更新的元素，放到更新队列中去，得到新的更新队列。
  • 渲染阶段（commit）：这个阶段 React 会遍历更新队列，将其所有的变更一次性更新到DOM上。

React 15 架构 ​

React15架构可以分为两层：

  • Reconciler（协调器）—— 负责找出变化的组件；
  • Renderer（渲染器）—— 负责将变化的组件渲染到页面上；

在React15及以前，Reconciler采用递归的方式创建虚拟DOM，递归过程是不能中断的。如果组件树的层级很深，递归会占用线程很多时间，递归更新时间超过了16ms，用户交互就会卡顿。

为了解决这个问题，React16将递归的无法中断的更新重构为异步的可中断更新，由于曾经用于递归的虚拟DOM数据结构已经无法满足需要。于是，全新的Fiber架构应运而生。

React 16 架构 ​

为了解决同步更新长时间占用线程导致页面卡顿的问题，也为了探索运行时优化的更多可能，React开始重构并一直持续至今。重构的目标是实现Concurrent Mode（并发模式）。

从v15到v16，React团队花了两年时间将源码架构中的Stack Reconciler重构为Fiber Reconciler。

React16架构可以分为三层：

  • Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler；
  • Reconciler（协调器）—— 负责找出变化的组件：更新工作从递归变成了可以中断的循环过程。Reconciler内部采用了Fiber的架构；
  • Renderer（渲染器）—— 负责将变化的组件渲染到页面上。

React 17 优化 ​

React16的expirationTimes模型只能区分是否>=expirationTimes决定节点是否更新。React17的lanes模型可以选定一个更新区间，并且动态的向区间中增减优先级，可以处理更细粒度的更新。

Lane用二进制位表示任务的优先级，方便优先级的计算（位运算），不同优先级占用不同位置的“赛道”，而且存在批的概念，优先级越低，“赛道”越多。高优先级打断低优先级，新建的任务需要赋予什么优先级等问题都是Lane所要解决的问题。

Concurrent Mode的目的是实现一套可中断/恢复的更新机制。其由两部分组成：

  • 一套协程架构：Fiber Reconciler
  • 基于协程架构的启发式更新算法：控制协程架构工作方式的算法

题目要点： ​

1. React 15 ​

  • DOM 更新优化：
    • 引入了改进的虚拟 DOM 算法，提高了更新效率。
    • 对 reconciliation（协调）算法进行了优化，以减少不必要的 DOM 操作。
  • 错误处理：
    • 增强了错误边界，提供了更好的错误处理能力。

2. React 16 ​

  • Fiber 架构：
    • 引入：彻底重写了协调算法，引入了 Fiber 架构。
    • 优先级调度：支持任务优先级调度，允许异步渲染，提升了 UI 响应能力。
    • 增量渲染：支持将更新任务分片，避免了长时间阻塞主线程。
    • 可中断任务：支持中断和恢复任务，提高了任务执行的灵活性。
  • 错误边界：
    • 引入了错误边界机制（Error Boundaries），用于捕获和处理渲染过程中的错误。
  • Fragments 和 Portals：
    • Fragments：允许返回多个子元素而不增加额外的 DOM 节点。
    • Portals：允许将子组件渲染到父组件以外的 DOM 节点中。

3. React 17 ​

  • 事件系统改进：
    • 事件委托：事件处理器现在附加到根节点，改进了事件系统的性能和一致性。
    • 事件冒泡：更好地处理事件冒泡，改进了事件传播的控制。
  • 无破坏性更新：
    • 兼容性：使新版本与旧版本的 React 代码兼容，减少升级时的问题。
    • 功能增强：在确保向后兼容的同时，优化了组件的更新机制。
  • 逐步弃用旧 API：
    • 清理：逐步弃用和优化了旧的生命周期方法，为未来版本做准备。

4. React 18 ​

  • Concurrent Mode（并发模式）：
    • 引入：引入并发模式，允许在后台进行任务处理，以提升应用的响应性。
    • 自动批处理：在并发模式下，支持自动批处理多个状态更新，减少渲染次数。
  • Suspense 和 Transition：
    • Suspense：扩展了对 Suspense 的支持，不仅仅用于代码分割，还可以用于数据加载。
    • Transition：引入了 startTransition API，允许将某些更新标记为非紧急，从而改善用户体验。
  • 改进的服务端渲染（SSR）：
    • 改进：优化了服务端渲染，支持流式渲染，使首屏加载更快。
    • React Server Components：支持服务器组件，可以从服务器直接渲染组件，减少前端 JavaScript 的体积。

5. React 19 (未来预期优化) ​

  • 进一步优化并发模式：
    • 预测：进一步改进并发模式的性能和易用性。
    • 新特性：可能会引入新的特性或 API 以增强并发渲染的能力。
  • 更多功能改进：
    • 功能增强：继续改进 Suspense 和 Concurrent Mode，提供更强大的功能和更好的开发体验。
    • 性能提升：进一步优化虚拟 DOM 和渲染机制，提升性能。

总结 ​

  • React 15：引入了改进的虚拟 DOM 算法和错误处理。
  • React 16：引入了 Fiber 架构，支持异步渲染和错误边界。
  • React 17：改进了事件系统，增强了向后兼容性，逐步弃用旧 API。
  • React 18：引入并发模式、Suspense 和 Transition，优化了服务端渲染。

每个版本都在不断优化 React 的性能、功能和开发体验，使其能够更好地应对复杂的应用场景和用户需求。