react是如何改变视图的
React 改变视图的核心机制
React 通过虚拟 DOM（Virtual DOM）和高效的 diff 算法来优化视图更新。当组件的状态或属性发生变化时，React 会重新渲染组件，但实际 DOM 操作仅针对必要的部分。
虚拟 DOM 的作用
React 在内存中维护一个虚拟 DOM 树，它是实际 DOM 的轻量级表示。每次状态变化时，React 会生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较（diff 算法）。
通过比较两棵树的差异，React 计算出最小化的 DOM 操作集合，然后批量应用到真实 DOM 上。这种方式避免了频繁操作真实 DOM 的性能开销。
组件更新触发条件
组件更新主要由以下两种情况触发：
- 组件内部状态（state）发生变化
- 组件接收的属性（props）发生变化
当这些变化发生时，React 会调用组件的 render 方法重新生成虚拟 DOM。
高效的 diff 算法
React 的 diff 算法遵循两个基本原则：
- 不同类型的元素会产生不同的树
- 通过 key 属性标识子元素在不同渲染中的稳定性
算法会递归比较子节点，识别出需要更新的节点，而不是重新渲染整个子树。
性能优化策略
React 提供了多种优化手段：
shouldComponentUpdate生命周期方法允许开发者控制组件是否需要重新渲染React.memo用于函数组件，避免不必要的重新渲染- 使用不可变数据可以更高效地检测状态变化
批量更新机制
React 会将多个状态更新批量处理，减少渲染次数。在事件处理函数中触发的多个 setState 调用会被合并为一次更新。
// 示例：批量更新
handleClick() {
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
// 最终只执行一次渲染
}Fiber 架构的引入
React 16 引入的 Fiber 架构进一步优化了渲染过程：
- 将渲染工作分解为多个小任务
- 允许中断和恢复渲染过程
- 优先处理高优先级更新（如用户交互）
这种架构使得 React 应用能够保持流畅的交互体验，即使在处理复杂界面时也是如此。
