react如何重新渲染
触发重新渲染的方法
在React中，组件的重新渲染通常由状态（state）或属性（props）的变化触发。以下是几种常见的重新渲染方法：
修改组件的state
使用useState或useReducer钩子更新状态变量，React会自动检测状态变化并触发重新渲染。
const [count, setCount] = useState(0);
setCount(count + 1); // 触发重新渲染接收新的props 当父组件传递的props发生变化时，子组件会自动重新渲染。确保父组件更新props值即可。
使用forceUpdate（不推荐）
类组件中可通过this.forceUpdate()强制渲染，但应尽量避免使用这种方法，因为它违背了React的数据驱动原则。
优化重新渲染的策略
使用React.memo
对函数组件使用React.memo进行记忆化，仅在props发生变化时重新渲染：
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});合理使用useCallback和useMemo 避免不必要的回调函数重建和计算重复：
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);控制子组件更新
通过自定义shouldComponentUpdate（类组件）或React.memo的对比函数，精确控制何时重新渲染：
React.memo(MyComponent, (prevProps, nextProps) => {
return prevProps.value === nextProps.value;
});常见问题排查
意外重新渲染 使用React DevTools的Profiler工具分析渲染性能，检查是否有：
- 未正确记忆化的回调函数
- 状态更新过于频繁
- 不必要的上下文（Context）更新
状态更新未触发渲染 确保使用不可变数据更新状态，直接修改对象/数组不会触发渲染：
// 错误示例（不会触发渲染）
state.items.push(newItem);
setState(state);
// 正确做法
setState({
items: [...state.items, newItem]
});上下文导致的渲染 当Context Provider的值变化时，所有消费该Context的组件都会重新渲染。可通过拆分Context或使用记忆化组件优化。
