react如何知道更新
React 的更新机制
React 通过虚拟 DOM（Virtual DOM）和协调（Reconciliation）机制来确定何时以及如何更新用户界面。以下是 React 更新流程的核心原理：
状态或 Props 变化触发更新
React 组件在以下情况下会触发重新渲染：
- 组件的
state发生变化（通过setState或useState的更新函数）。 - 组件的
props发生变化（父组件重新渲染并传递了新的 props）。
React 会跟踪这些变化，并标记受影响的组件为“脏组件”（dirty components），准备进行更新。
虚拟 DOM 的 Diff 算法
React 在更新时会生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较（Diffing）。Diff 算法会找出两者之间的差异，并计算出最小的 DOM 操作集合。
- 元素类型不同：如果新旧元素的类型不同（例如从
div变为span），React 会直接销毁旧树并构建新树。 - 相同类型的元素：React 会保留 DOM 节点，仅更新发生变化的属性。
- 列表元素的 Key 属性：通过
key属性，React 可以高效地识别列表中的元素是否被移动、添加或删除。
协调与提交阶段
React 的更新分为两个阶段：
- 渲染阶段（Render Phase）：生成新的虚拟 DOM 树并进行 Diff 比较，确定需要更新的部分。
- 提交阶段（Commit Phase）：将计算出的变更应用到真实 DOM 上。
React 会批量处理更新以提高性能，避免频繁的 DOM 操作。
性能优化手段
React 提供了多种方式避免不必要的更新：
React.memo：用于函数组件，避免在 props 未变化时重新渲染。shouldComponentUpdate：类组件中的生命周期方法，可以手动控制是否更新。useMemo和useCallback：缓存值和函数，避免因引用变化导致的子组件重新渲染。
示例代码
以下是一个简单的 React 组件示例，展示状态更新如何触发重新渲染：
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 会高效地仅更新变化的部分（这里是 p 标签的内容）。
