react是如何改变视图的
React 改变视图的核心机制
React 通过虚拟 DOM（Virtual DOM）和高效的 Diff 算法来更新视图。当组件的状态（state）或属性（props）发生变化时，React 会重新渲染组件，生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较，找出差异部分，最后仅更新实际 DOM 中需要变化的部分。
虚拟 DOM 的作用
虚拟 DOM 是一个轻量级的 JavaScript 对象，它是对真实 DOM 的抽象表示。React 通过虚拟 DOM 避免了直接操作真实 DOM 的开销，因为直接操作 DOM 通常比较耗时。虚拟 DOM 可以在内存中快速生成和比较，从而优化性能。
Diff 算法的工作原理
React 使用 Diff 算法比较新旧虚拟 DOM 树的差异。Diff 算法通过以下策略优化比较过程：
- 分层比较：React 只会比较同一层级的节点，不会跨层级比较。
- 节点类型比较：如果节点类型不同（如从
div变为span），React 会直接销毁旧节点并创建新节点。 - Key 属性：为列表中的元素分配唯一的
key属性，帮助 React 识别哪些元素发生了变化，从而减少不必要的重新渲染。
状态更新触发重新渲染
当组件的 state 或 props 发生变化时，React 会调用组件的 render 方法生成新的虚拟 DOM 树。React 会将新旧虚拟 DOM 树进行比较，计算出最小的变更集，然后批量更新真实 DOM。
批量更新优化性能
React 会将多个状态更新合并为一次更新，避免频繁操作 DOM。这种批量更新机制通过事务（Transaction）和调度器（Scheduler）实现，确保更新过程高效且平滑。
示例代码展示更新过程
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}在这个例子中，点击按钮会调用 setCount 更新状态，触发组件的重新渲染。React 会生成新的虚拟 DOM，并与旧的虚拟 DOM 比较，最终只更新 p 标签中的文本内容。
总结
React 通过虚拟 DOM 和 Diff 算法高效地更新视图，避免了直接操作真实 DOM 的开销。状态或属性的变化会触发重新渲染，React 会计算出最小的变更集并批量更新 DOM，从而提升性能。
