React 原理篇

问题 1：虚拟 DOM 的意义

1. 减少实际的 DOM 操作：通过比较新旧虚拟 DOM 树的差异，React 可以确定需要更新的部分，并生成最小化的 DOM 操作序列。这样可以减少实际的 DOM 操作次数，提高性能。
2. 批量更新：React 会将所有需要更新的 DOM 操作批量执行，从而避免了频繁的 DOM 操作，提高了性能。
3. 跨平台兼容性：虚拟 DOM 是一个轻量级的 JavaScript 对象，可以在不同的平台上运行，例如浏览器、移动设备和服务器。这使得 React 可以在多个环境中使用相同的代码和逻辑。
4. 更好的开发体验：虚拟 DOM 使得开发者可以使用类似于 HTML 的标记语言来描述 UI，而不需要直接操作 DOM。这简化了开发过程，并提供了更好的开发体验。

问题 2：JSX 转为真实 DOM 的过程？

1. jsx 代码：

return (
  <div className='box'>
    {/* 组件 */}
    <Header>hello</Header>
    {/* 元素 */}
    <div>container</div>
    {/* 文本 */}
    footer
  </div>
)

2. 使用 Babel 将 jsx 转为 React.createElement 后：

React.createElement(type, props, ...children)

React.createElement(
  'div',
  { className: 'box' },
  React.createElement(Header, null, 'hello'),
  React.createElement('div', null, 'container'),
  'footer'
)

3. 创建虚拟 DOM

React.createElement 返回一个描述 UI 的 JavaScript 对象（即虚拟 DOM）。

4. 调用 ReactDOM.render

使用 ReactDOM.render 方法将虚拟 DOM 渲染到指定的挂载容器中。

ReactDOM.render(虚拟DOM, document.getElementById('root'))

5. Diff 算法比较差异

• React 使用高效的 Diff 算法来比较新旧虚拟 DOM 树之间的差异。
• 只更新有变化的部分，生成最小化的 DOM 操作序列。

6. 批量更新与优化

React 会将所有需要更新的 DOM 操作批量执行，以减少实际的 DOM 操作次数，提高性能

7. 生成真实 DOM

最终，React 将这些最小化的 DOM 操作应用到浏览器的真实 DOM 中，完成页面的渲染或更新。

问题 3：React DOM 的 diff 算法

React 的虚拟 DOM diff 算法是一种用于比较新旧虚拟 DOM 树的差异的算法，目标是找出需要更新的部分，并生成一个最小化的 DOM 操作序列：

1. 比较根节点：算法首先比较新旧虚拟 DOM 树的根节点。如果它们的类型不同，那么 React 会完全替换旧的 DOM 树。如果它们的类型相同，那么算法会继续比较它们的属性和子节点。
2. 比较属性：算法会比较新旧虚拟 DOM 树的属性，判断是否有属性发生了变化。如果有属性发生了变化，React 会更新对应的 DOM 节点上的属性。
3. 比较子节点：算法会递归地比较新旧虚拟 DOM 树的子节点。如果子节点的数量不同，那么 React 会更新对应的 DOM 节点的子节点。如果子节点的数量相同，那么算法会继续比较它们的类型和内容。
4. 递归比较：算法会递归地比较新旧虚拟 DOM 树的子节点。如果子节点的类型相同，那么算法会继续比较它们的属性和子节点。如果子节点的类型不同，那么 React 会完全替换旧的 DOM 节点。
5. 生成 DOM 操作序列：通过比较新旧虚拟 DOM 树，算法会生成一个最小化的 DOM 操作序列，包括插入、更新和删除操作。React 会将这些操作批量执行，从而减少实际的 DOM 操作次数。

问题 4：Fiber 架构

• Fiber 是 React 中一种新的架构，它用于实现增量式的、可中断的虚拟 DOM diff 过程。Fiber 的目标是改进 React 的性能和用户体验，使得 React 应用程序更加流畅和响应。
• 在 React 的旧版本中，虚拟 DOM diff 过程是一个递归的过程，它会一直执行直到完成，期间无法中断。这可能会导致长时间的 JavaScript 执行，从而阻塞主线程，造成页面的卡顿和不流畅的用户体验。
• 为了解决这个问题，React 引入了 Fiber 架构。Fiber 将整个虚拟 DOM diff 过程分为多个小任务，每个任务称为一个 Fiber 节点。这些 Fiber 节点被组织成一个树状结构，称为 Fiber 树。
• Fiber 树可以被中断和恢复，这意味着在执行 Fiber 树的 diff 过程时，可以在任意时刻中断当前任务，并优先执行其他任务。这样可以使得应用程序更加灵活地响应用户的交互和其他优先级的任务，提高性能和响应性。
• 通过 Fiber 架构，React 可以根据任务的优先级动态地调整任务的执行顺序，从而更好地控制 JavaScript 的执行。这使得 React 应用程序可以在不阻塞主线程的情况下进行虚拟 DOM diff，减少页面的卡顿和提高用户体验。
• 总而言之，Fiber 是 React 中一种新的架构，用于实现增量式的、可中断的虚拟 DOM diff 过程。它通过将 diff 过程分为多个小任务，并根据优先级动态地调整任务的执行顺序，提高 React 应用程序的性能和响应性。