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 识别哪些项已更改。
• 避免在渲染函数中进行昂贵的计算或副作用操作。