react如何触发重新渲染
触发 React 组件重新渲染的方法
React 组件的重新渲染通常由状态（state）或属性（props）的变化触发。以下是常见的触发方式：
状态更新
使用 useState 或 useReducer Hook 更新状态时，组件会自动重新渲染。例如：
const [count, setCount] = useState(0);
// 调用 setCount 会触发重新渲染
setCount(count + 1);属性变化 父组件传递的 props 发生变化时，子组件会重新渲染。例如：
// 父组件
<ChildComponent value={newValue} />Context 变化 当 Context 提供的数据更新时，所有消费该 Context 的组件会重新渲染：
const value = useContext(MyContext);
// MyContext.Provider 的 value 变化时触发重新渲染forceUpdate（不推荐）
类组件中可以通过 this.forceUpdate() 强制重新渲染，但应尽量避免使用。
外部因素
- 父组件重新渲染会导致所有子组件重新渲染（除非使用
React.memo或shouldComponentUpdate优化）。 - Redux 或其他状态管理库的 store 更新也可能触发重新渲染。
优化重新渲染的方法
React.memo
用 React.memo 包装函数组件可以避免不必要的 props 未变时的重新渲染：
const MemoizedComponent = React.memo(MyComponent);useMemo/useCallback 使用这些 Hook 可以避免依赖项未变化时的重复计算或函数重建：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);shouldComponentUpdate 类组件中可以通过这个生命周期方法控制是否重新渲染：
shouldComponentUpdate(nextProps, nextState) {
return nextProps.id !== this.props.id;
}PureComponent
类组件继承 PureComponent 会自动实现浅比较的 shouldComponentUpdate。
避免不必要的重新渲染
- 将状态尽量下放到需要它的组件中，减少不必要的渲染波及。
- 对于大型列表使用 key 属性帮助 React 识别哪些项已更改。
- 避免在渲染函数中进行昂贵的计算或副作用操作。
