如何避免重复渲染react
使用 React.memo 进行组件记忆
React.memo 是一个高阶组件，用于包装函数组件以避免不必要的重新渲染。它会对组件的 props 进行浅比较，仅在 props 发生变化时重新渲染组件。
const MyComponent = React.memo(function MyComponent(props) {
// 组件逻辑
});使用 useMemo 缓存计算结果
useMemo 钩子可以缓存计算结果，避免在每次渲染时重复计算。它接受一个函数和一个依赖数组，仅在依赖项变化时重新计算值。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);使用 useCallback 缓存回调函数
useCallback 钩子可以缓存回调函数，避免在每次渲染时创建新的函数实例。这对于传递给子组件的回调函数特别有用。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);合理设计组件结构
将频繁变化的逻辑拆分为独立的小组件，减少父组件重新渲染时的影响范围。保持组件职责单一，避免不必要的 props 传递。
避免内联对象和函数
在渲染方法中避免直接创建新的对象或函数，这会导致子组件每次都接收到新的 props 引用，从而触发不必要的重新渲染。
// 避免这样做
<ChildComponent style={{ color: 'red' }} onClick={() => {}} />
// 应该这样做
const style = useMemo(() => ({ color: 'red' }), []);
const handleClick = useCallback(() => {}, []);
<ChildComponent style={style} onClick={handleClick} />使用 shouldComponentUpdate 生命周期方法
对于类组件，可以实现 shouldComponentUpdate 方法来控制组件是否应该更新。通过比较当前 props/state 和 nextProps/nextState 来决定是否需要重新渲染。
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
// 自定义比较逻辑
return this.props.value !== nextProps.value;
}
}使用不可变数据
采用不可变数据模式可以更轻松地检测数据变化，避免深层比较的开销。使用像 Immutable.js 这样的库或 JavaScript 的扩展运算符来确保数据变更时创建新引用。
const newState = {
...prevState,
user: {
...prevState.user,
name: 'New Name'
}
};优化列表渲染
对于大型列表，使用虚拟化技术如 react-window 或 react-virtualized 来只渲染可见的项目，而不是整个列表。为列表项提供稳定的 key 属性。
import { FixedSizeList as List } from 'react-window';
<List
height={500}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>使用性能分析工具
利用 React DevTools 的 Profiler 组件和 Chrome 的性能分析工具来识别性能瓶颈。这些工具可以帮助定位不必要的渲染和优化机会。
import { Profiler } from 'react';
<Profiler id="MyComponent" onRender={callback}>
<MyComponent />
</Profiler>
