react如何更新视图

更新视图的核心机制

React通过虚拟DOM（Virtual DOM）和协调（Reconciliation）机制实现高效视图更新。当组件的状态（state）或属性（props）变化时，React会重新渲染组件及其子组件，生成新的虚拟DOM树，并通过Diff算法比对差异，最终仅更新实际DOM中必要的部分。

触发视图更新的方法

修改组件的state
调用setState()方法更新组件的内部状态，React会自动触发重新渲染。

this.setState({ count: this.state.count + 1 }); // 类组件
setCount(prevCount => prevCount + 1);          // 函数组件（useState）

接收新的props
父组件传递的props发生变化时，子组件会重新渲染。可通过React.memo或shouldComponentUpdate优化不必要的更新。

使用Context API
当Context的Provider值变化时，所有消费该Context的组件会重新渲染。

const ThemeContext = React.createContext();
<ThemeContext.Provider value={newValue}>
  <ChildComponent />
</ThemeContext.Provider>

强制更新（不推荐）
类组件中可通过this.forceUpdate()强制重新渲染，但应优先依赖state/props驱动更新。

性能优化策略

避免不必要的渲染

• 类组件：实现shouldComponentUpdate或继承PureComponent。
• 函数组件：使用React.memo包裹组件，或通过useMemo/useCallback缓存值/函数。

批量更新
React会自动合并多个setState调用为单次更新。异步场景中可使用ReactDOM.unstable_batchedUpdates（实验性API）或React 18的自动批处理。

按需更新列表项
为列表元素添加唯一的key属性，帮助React高效识别增删改操作。

常见问题与解决方案

视图未更新

• 检查是否直接修改了state（如this.state.count = 1），必须通过setState。
• 确保props/state的引用类型（如数组、对象）被正确更新（浅比较问题）。

无限循环
避免在渲染逻辑中直接调用setState或修改props，可通过useEffect依赖项控制更新时机。

通过合理应用上述方法，可确保React视图高效、准确地响应数据变化。