如何优化react性能
使用React.memo进行组件记忆
React.memo是一个高阶组件，用于优化函数组件的渲染性能。它会记忆组件的渲染结果，避免不必要的重新渲染。只有当组件的props发生变化时，才会重新渲染组件。
const MyComponent = React.memo(function MyComponent(props) {
/* 使用props渲染 */
});使用useCallback和useMemo避免重复计算
useCallback用于记忆函数，避免在每次渲染时创建新的函数实例。useMemo用于记忆计算结果，避免在每次渲染时重复计算。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);避免不必要的状态更新
确保状态更新是必要的，避免在渲染过程中频繁更新状态。可以使用useReducer来管理复杂的状态逻辑，减少不必要的更新。
const [state, dispatch] = useReducer(reducer, initialState);使用懒加载和代码分割
通过React.lazy和Suspense实现组件的懒加载，减少初始加载时间。代码分割可以帮助减少打包文件的体积，提高加载速度。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}优化列表渲染
使用key属性来优化列表渲染，确保每个列表项有一个稳定且唯一的key。避免使用索引作为key，除非列表是静态的且不会重新排序。
{items.map(item => (
<ListItem key={item.id} item={item} />
))}避免内联函数和对象
内联函数和对象会导致每次渲染时都创建新的引用，触发不必要的重新渲染。尽量将函数和对象定义在组件外部或使用useCallback和useMemo进行记忆。
// 不推荐
<button onClick={() => handleClick(item.id)}>Click</button>
// 推荐
const handleClick = useCallback(id => {
// 处理点击事件
}, []);
<button onClick={handleClick}>Click</button>使用生产模式构建
确保在生产环境中使用React的生产模式构建，这会启用性能优化和代码压缩。开发模式包含额外的警告和检查，会影响性能。
npm run build使用性能分析工具
React DevTools和Chrome Performance工具可以帮助识别性能瓶颈。通过分析组件渲染时间和频率，可以找到需要优化的地方。
npm install -g react-devtools虚拟化长列表
对于渲染大量数据的列表，使用虚拟化技术（如react-window或react-virtualized）可以显著提高性能。这些库只渲染可见区域内的列表项，减少DOM节点数量。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
const MyList = () => (
<List height={150} itemCount={1000} itemSize={35} width={300}>
{Row}
</List>
);减少上下文使用
避免在上下文（Context）中存储频繁变化的数据，这会导致所有消费者组件重新渲染。可以将上下文拆分为多个小的上下文，或者使用useMemo优化上下文值。
const MyContext = React.createContext();
const MyProvider = ({ children }) => {
const value = useMemo(() => ({ someValue }), [someValue]);
return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};
