react如何触发更新

触发 React 组件更新的方法

调用 setState 方法
通过 setState 更新组件的状态（state），React 会自动触发重新渲染。即使状态值未变化，调用 setState 仍会触发更新。

this.setState({ count: this.state.count + 1 });

函数组件中使用 useState Hook
函数组件通过 useState 返回的更新函数触发重新渲染。

const [count, setCount] = useState(0);
setCount(count + 1); // 触发更新

父组件重新渲染
父组件更新时，默认会递归触发所有子组件的重新渲染（除非子组件通过 shouldComponentUpdate 或 React.memo 优化）。

使用 forceUpdate
强制跳过 shouldComponentUpdate 直接触发渲染，通常不建议使用。

this.forceUpdate();

Context 值变更
当组件订阅的 Context 值发生变化时，组件会重新渲染。

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

Redux 或其他状态管理库更新
当连接的全局状态（如 Redux store）变更时，组件会通过订阅机制触发更新。

dispatch({ type: 'INCREMENT' }); // Redux action

Props 变化
父组件传递的 props 发生变更时，子组件会重新渲染。

<ChildComponent data={newData} />

Hooks 依赖项变更
useEffect、useMemo 或 useCallback 的依赖项变化时，可能间接触发渲染。

useEffect(() => { /* 副作用 */ }, [dependency]); // dependency 变化触发重新执行

优化更新的注意事项

• 使用 React.memo 或 PureComponent 避免不必要的子组件更新。
• 在 shouldComponentUpdate 中自定义渲染逻辑以减少冗余渲染。
• 避免在渲染函数中直接修改状态或生成不稳定引用（如内联对象/函数）。