如何避免react渲染多次
避免 React 渲染多次的方法
使用 React.memo 进行组件记忆
将函数组件包裹在 React.memo 中，避免在父组件重新渲染时，子组件不必要的重新渲染。适用于 props 未变化的场景。
const MyComponent = React.memo(function MyComponent(props) {
return <div>{props.value}</div>;
});合理使用 useMemo 和 useCallbackuseMemo 缓存计算结果，避免重复计算。useCallback 缓存函数引用，避免函数重新创建导致子组件渲染。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);避免在渲染函数中进行高开销操作
将数据转换、过滤等操作移至 useMemo 或组件外部，减少渲染时的计算负担。
优化状态更新逻辑
合并多次状态更新，避免连续调用 setState 触发多次渲染。使用函数式更新确保依赖最新状态。
setCount(prevCount => prevCount + 1);使用 key 属性优化列表渲染
为列表项添加唯一且稳定的 key，帮助 React 识别节点复用，减少不必要的 DOM 操作。
{items.map(item => <li key={item.id}>{item.text}</li>)}避免在 useEffect 中触发额外渲染
确保 useEffect 的依赖项数组正确，避免因依赖变化频繁触发副作用和重新渲染。
useEffect(() => {
fetchData();
}, [id]); // 仅在 id 变化时执行使用 shouldComponentUpdate（类组件）
通过自定义 shouldComponentUpdate 逻辑，明确控制类组件是否需要重新渲染。
shouldComponentUpdate(nextProps, nextState) {
return nextProps.value !== this.props.value;
}减少 Context 的触发范围
将 Context 拆分为多个小范围 Provider，避免大范围数据变化导致所有消费者重新渲染。
使用不可变数据
通过 Immutable.js 或展开运算符 (...) 确保状态更新时引用变化可被正确检测，避免浅比较失效。
setState(prevState => ({ ...prevState, count: prevState.count + 1 }));通过结合以上方法，可以有效减少 React 组件的无效渲染，提升应用性能。
