react

虚拟 dom、diff 算法、key 的作用

虚拟 DOM（Virtual DOM）、Diff 算法和 key 是现代前端框架（如 React 和 Vue）中用来优化 DOM 操作、提高性能的关键概念。

1. 虚拟 DOM

定义：
- 虚拟 DOM 是一个轻量级的 JavaScript 对象，它代表了真实的 DOM 结构。
- 当组件的状态发生变化时，框架会先更新虚拟 DOM，而不是直接操作真实的 DOM。
作用：
- 提高性能：
  - 减少了直接操作真实 DOM 的次数。
  - 通过 Diff 算法，只更新需要更新的部分，避免了不必要的 DOM 操作。
- 跨平台：
  - 虚拟 DOM 不依赖于特定的平台，可以方便地在不同的环境中使用。

2. Diff 算法

定义：
- Diff 算法是一种比较虚拟 DOM 树差异的算法。
- 它会比较新旧两棵虚拟 DOM 树，找出需要更新的部分。
作用：
- 最小化 DOM 操作：
  - Diff 算法会计算出最小的更新路径，只更新需要更新的节点。
  - 这大大提高了性能，尤其是在大型应用中。
- 提高渲染效率：
  - 通过减少不必要的 DOM 操作，Diff 算法可以提高渲染效率。
常见 Diff 策略：
- 同层比较： 只比较同一层级的节点。
- 深度优先： 优先比较子节点。
- key 的作用： 通过 key 来标识节点的唯一性，帮助 Diff 算法更准确地比较节点。

3. key 的作用

定义：
- key 是一个特殊的属性，用于标识虚拟 DOM 列表中的每个节点。
- 它通常是一个唯一的字符串或数字。
作用：
- 提高 Diff 效率：
  - key 可以帮助 Diff 算法更准确地判断节点是否发生变化。
  - 当节点的位置发生变化时，Diff 算法可以通过 key 来识别，避免不必要的 DOM 操作。
- 维护组件状态：
  - key 可以帮助框架维护组件的状态。
  - 当组件被移动或删除时，框架可以通过 key 来识别，避免组件状态丢失。
使用建议：
- 尽量使用唯一的、稳定的 key。
- 避免使用数组索引作为 key，因为当数组元素的位置发生变化时，索引也会变化，导致 Diff 算法无法正确识别节点。

总结

这三个概念共同作用，提高了前端框架的性能和渲染效率。

在 React 16 中，Fiber 架构被引入，它是一种全新的协调引擎，旨在解决 React 在处理复杂应用时可能出现的性能瓶颈。下面是对 Fiber 架构的详细讲解：

1. Fiber 的核心概念

Fiber 节点：
- Fiber 架构将每个 React 组件都表示为一个 Fiber 节点。
- 每个 Fiber 节点都包含了组件的信息，例如类型、属性、子节点等。
- Fiber 节点形成了一个 Fiber 树，它与虚拟 DOM 树相对应。
工作循环（Work Loop）：
- Fiber 架构使用工作循环来遍历 Fiber 树，执行渲染和更新任务。
- 工作循环可以被中断和恢复，从而实现异步渲染。
优先级（Priority）：
- Fiber 架构为每个 Fiber 节点分配了优先级，高优先级的任务会优先执行。
- 这使得 React 可以更好地响应用户交互，即使在执行复杂任务时也能保持流畅。

2. Fiber 架构的优势

异步渲染：
- Fiber 架构允许 React 将渲染任务分解为多个小任务，并在空闲时间执行。
- 这使得 React 可以更好地利用浏览器的空闲时间，提高应用的响应性和流畅性。
可中断和恢复：
- Fiber 架构的工作循环可以被中断和恢复，这意味着 React 可以随时中断渲染任务，去处理更高优先级的任务。
- 这使得 React 可以更好地响应用户交互，即使在执行复杂任务时也能保持流畅。
优先级调度：
- Fiber 架构为每个 Fiber 节点分配了优先级，高优先级的任务会优先执行。
- 这使得 React 可以更好地控制任务的执行顺序，保证关键任务的及时执行。

3. Fiber 架构的工作原理

构建 Fiber 树：
- 当 React 组件需要更新时，React 会根据新的组件状态构建一个新的 Fiber 树。
遍历 Fiber 树：
- Fiber 架构使用工作循环遍历 Fiber 树，执行渲染和更新任务。
- 在遍历过程中，React 会比较新旧 Fiber 节点，找出需要更新的部分。
执行任务：
- 对于需要更新的 Fiber 节点，React 会执行相应的任务，例如更新 DOM、调用生命周期函数等。
调度任务：
- Fiber 架构会根据 Fiber 节点的优先级，调度任务的执行顺序。
- 高优先级的任务会优先执行，低优先级的任务可能会被延迟执行。
提交更新：
- 当所有任务执行完毕后，React 会将更新提交到 DOM。

4. Fiber 架构的应用

总之，React Fiber 是一种新的 React 核心算法，其目的是为了增加React的并发性能，使得React在运行复杂的动画，布局计算，相应用户操作的时候，保持很高的性能。