React项目中性能优化自学 1. 避免不必要的重渲染 1.1 对于类组件，使用shouldComponentUpdat

自学

1. 避免不必要的重渲染

1.1 对于类组件，使用shouldComponentUpdate

1.2 对于函数组件,使用React.memo

2. 使用合适的状态管理工具

选择合适的状态管理工具，并合理地拆分状态，避免将所有状态存在放一个大的store,从而减少不必要的状态更新

3. 使用`useMemo`和`useCallback`

在函数组件中，使用 useMemo 和 useCallback 来缓存计算结果和函数定义，避免每次渲染都重新计算和定义。

4. 代码分割和懒加载

使用React的React.lazy和Suspense进行代码分割和懒加载，减少初始加载时间。

5. 虚拟化长列表

对于长列表，使用如react-window或react-virtualized这样的库进行列表虚拟化，只渲染可见区域的列表项。

import { FixedSizeList as List } from 'react-window';

const MyComponent = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => (
      <div style={style}>Row {index}</div>
    )}
  </List>
);

6. 避免匿名函数和内联函数

避免在组件的render方法中定义匿名函数和内联函数，因为它们会导致不必要的重新渲染。

// Bad
const MyComponent = () => (
  <button onClick={() => doSomething()}>Click me</button>
);

// Good
const MyComponent = () => {
  const handleClick = () => doSomething();

  return <button onClick={handleClick}>Click me</button>;
};

7. 使用服务端渲染（SSR）或静态站点生成（SSG）

对于初始渲染时间要求较高的应用，可以考虑使用服务端渲染（SSR）或静态站点生成（SSG），如 Next.js。

8. 优化图片和资源加载

使用适当的图片格式（如 WebP）、压缩图片、懒加载图片（如 react-lazyload），并使用 CDN 加速资源加载。

9. 使用性能监控工具

使用 React DevTools、Chrome DevTools 等性能监控工具，分析和发现性能瓶颈，并进行针对性的优化。

10. 避免过度渲染和深层嵌套

保持组件层次结构的扁平化，避免过度嵌套和渲染过多的组件。

React项目中性能优化