react如何触发更新
触发 React 组件更新的方法
状态更新(State Update)
通过 useState 或 this.setState 修改组件的状态。状态变化会自动触发组件的重新渲染。
const [count, setCount] = useState(0);
setCount(count + 1); // 触发更新
Props 变化
父组件传递的 props 发生变更时,子组件会重新渲染。确保父组件更新 props 值即可触发子组件更新。

<ChildComponent newProp={updatedValue} />
Context 变更
当使用 useContext 或 Context.Consumer 订阅的 Context 值发生变化时,组件会重新渲染。
const value = useContext(MyContext); // Context 更新时触发
强制更新(Force Update)
类组件中可通过 this.forceUpdate() 强制重新渲染,但应尽量避免使用。函数组件无直接等效方法,通常通过状态或 key 变更实现类似效果。

this.forceUpdate(); // 类组件强制更新
Key 属性变更
为组件设置 key 属性并改变其值,React 会将其视为新组件,触发卸载和重新挂载。
<ListItem key={item.id} /> // 修改 key 触发重建
Redux 或状态管理库更新
当连接的 Redux store 或其他状态管理库(如 MobX、Zustand)的状态变化时,订阅该状态的组件会自动更新。
const state = useSelector((state) => state.value); // Redux 更新时触发
注意事项
- 避免不必要的更新:使用
React.memo、useMemo或useCallback优化性能。 - 副作用控制:在
useEffect或生命周期方法中谨慎处理更新逻辑,防止无限循环。






