react如何更新视图
更新视图的核心机制
React 通过虚拟 DOM（Virtual DOM）和协调（Reconciliation）机制实现高效视图更新。当组件的状态或属性发生变化时，React 会重新渲染组件及其子组件，生成新的虚拟 DOM 树，并与旧树进行差异对比（Diffing），最后仅将实际变化的部分更新到真实 DOM。
触发更新的方法
状态更新（State）
使用 useState 或 useReducer Hook 管理组件状态，状态变更会自动触发重新渲染。例如：
const [count, setCount] = useState(0);
// 更新状态触发视图更新
setCount(count + 1);属性变化（Props）
父组件传递的 props 发生变化时，子组件会重新渲染。可通过 React.memo 优化不必要的渲染：
const MemoizedComponent = React.memo(function MyComponent(props) {
// 仅在 props 变化时重新渲染
});强制更新
极端情况下可使用 forceUpdate（类组件）或利用 Hook 模拟强制更新，但不推荐常规使用：
// 类组件中
this.forceUpdate();
// 函数组件中模拟
const [, forceUpdate] = useReducer(x => x + 1, 0);
forceUpdate(); // 强制重新渲染性能优化策略
条件渲染控制
通过 shouldComponentUpdate（类组件）或 React.memo + 自定义比较函数减少不必要的渲染：
React.memo(MyComponent, (prevProps, nextProps) => {
return prevProps.value === nextProps.value;
});不可变数据 状态更新时应始终返回新对象/数组而非直接修改原数据，以确保 React 能正确检测变化：
setItems([...items, newItem]); // 正确：新数组
setObj({...obj, key: newValue}); // 正确：新对象使用 useMemo/useCallback 缓存计算昂贵的结果或函数，避免子组件因引用变化而重新渲染：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);异步更新批处理
React 18+ 默认自动批处理状态更新，多个 setState 调用会合并为单次渲染。需同步访问最新状态时可使用 flushSync：
import { flushSync } from 'react-dom';
flushSync(() => {
setCount(c => c + 1);
}); // 立即更新 DOM上下文（Context）更新
当 Context 的 value 变化时，所有消费该 Context 的组件都会重新渲染。可通过拆分 Context 或使用 useMemo 优化：
const MyContext = React.createContext();
<MyContext.Provider value={useMemo(() => ({ value }), [value])}>
<Child />
</MyContext.Provider>
