react如何处理不断变化dom更新
React 处理动态 DOM 更新的方法
React 通过虚拟 DOM 和高效的 diff 算法优化动态 DOM 更新。以下是核心方法：
使用状态管理（State）
通过 useState 或 useReducer 管理组件状态变化，触发重新渲染。状态更新后，React 会计算虚拟 DOM 差异并高效更新实际 DOM。
const [count, setCount] = useState(0);
const handleClick = () => setCount(count + 1);依赖 key 属性优化列表渲染
动态列表项需提供唯一 key，帮助 React 识别元素变化，减少不必要的 DOM 操作。
{items.map(item => <div key={item.id}>{item.text}</div>)}使用 useEffect 处理副作用
在依赖项变化时执行副作用（如数据请求），结合状态更新触发 DOM 变更。
useEffect(() => {
fetchData().then(data => setItems(data));
}, [dependency]);性能优化手段
React.memo：缓存组件，避免不必要的渲染。useCallback/useMemo：缓存函数或计算结果，减少子组件重复更新。
const memoizedComponent = React.memo(MyComponent);
const memoizedCallback = useCallback(() => doSomething(), []);不可变数据更新
直接修改状态对象可能导致渲染问题，应始终返回新对象/数组。
setItems([...items, newItem]); // 正确
items.push(newItem); // 错误Context API 跨组件更新
通过 createContext 和 useContext 实现深层嵌套组件的状态共享，触发关联 DOM 更新。
const ThemeContext = createContext();
const value = useContext(ThemeContext);
