React 进阶面试题, React 中 DOM 结构发生变化后,内部经历了哪些变化?
React 进阶面试题, React 中 DOM 结构发生变化后,内部经历了哪些变化?
QA
Step 1
Q:: React 中 DOM 结构发生变化后，内部经历了哪些变化？
A:: 当 React 中的 DOM 结构发生变化时，React 内部会经历以下几个关键步骤：
1. 触发渲染更新：当组件的状态或属性发生变化时，React 会开始新一轮的渲染过程。
2. 调和（Reconciliation）：React 使用虚拟 DOM（Virtual DOM）来跟踪 DOM 结构的变化。React 会创建一个新的虚拟 DOM 树，然后将其与之前的虚拟 DOM 树进行对比，找出最小的变化（称为 diff）。
3. 更新队列（Update Queue）：找到的差异会被加入更新队列。React 根据这些差异生成实际的 DOM 操作指令，以确保最终的 DOM 结构与新的虚拟 DOM 匹配。
4. 批量更新（Batching Updates）：为了提升性能，React 会将多次状态或属性更新批量处理，避免多次无效的 DOM 更新。
5. DOM 更新：最终，React 将更新队列中的操作应用到实际的 DOM 上，更新视图。
Step 2
Q:: 虚拟 DOM 的作用是什么？
A:: 虚拟 DOM 是 React 的一个核心概念，它是一种抽象层，表示 UI 的理想状态。虚拟 DOM 的作用包括：
1. 性能优化：虚拟 DOM 可以减少直接与真实 DOM 交互的次数，因为 DOM 操作通常比较昂贵。
2. 跨平台一致性：虚拟 DOM 是跨平台的抽象层，它不仅可以渲染到浏览器的 DOM，还可以渲染到其他目标（如 React Native）。
3. 简化编程模型：通过虚拟 DOM，开发者可以用声明式的方式描述 UI，React 会自动管理底层的 DOM 更新。
Step 3
Q:: React 中的调和算法（Reconciliation）是如何工作的？
A:: 调和算法是 React 中用于计算虚拟 DOM 差异（diff）并决定如何更新实际 DOM 的过程。调和算法的工作原理包括以下几个步骤：
1. 树的比较：React 首先会比较两棵虚拟 DOM 树（旧树和新树）。
2. 节点比较：对于每一个节点，React 会比较其类型。如果类型不同，则 React 会认为是一个全新的节点，直接移除旧的并插入新的节点。
3. 节点的复用：如果节点类型相同，React 会复用旧节点，并继续比较其子节点。
4. **列表的处理**：对于列表中的节点，React 会通过 'key' 属性来识别每个节点，从而优化列表的渲染性能。
Step 4
Q:: React 中的生命周期方法有哪些？分别有什么作用？
A:: React 组件生命周期方法主要分为三个阶段：
1. 挂载阶段：
- constructor()``: 构造函数，初始化 state 和绑定事件。
- componentDidMount()``: 组件挂载后调用，适合进行网络请求或 DOM 操作。
2. 更新阶段：
- componentDidUpdate(prevProps, prevState)``: 组件更新后调用，可用于更新 DOM 或发起新的请求。
- shouldComponentUpdate(nextProps, nextState)``: 控制组件是否需要更新，默认返回 true。
3. 卸载阶段：
- componentWillUnmount()``: 组件即将卸载时调用，用于清理定时器或取消网络请求。