说说react性能优化的手段有哪些? -岩石教程

1. 避免不必要的渲染

React.memo：对函数组件进行浅层比较，防止不必要的渲染。适用于纯函数组件。
```
const MyComponent = React.memo(function MyComponent(props) {
  // Component logic here
});
```
shouldComponentUpdate和PureComponent：对于类组件，可以通过shouldComponentUpdate来控制组件是否需要重新渲染，或直接使用PureComponent，它实现了浅比较。
```
class MyComponent extends React.PureComponent {
  // Component logic here
}
```

2. 使用`useMemo`和`useCallback`

useMemo：记忆化计算结果，避免在每次渲染时重复计算。

const computedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback：记忆化回调函数，避免每次渲染时重新创建函数。

const handleClick = useCallback(() => {
  // handle click
}, [dependency]);

3. 虚拟化长列表

使用列表虚拟化技术只渲染可视区域内的列表项，可以显著提高长列表的渲染性能。常用库包括react-window和react-virtualized。

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

const MyList = ({ items }) => (
  <List
    height={150}
    itemCount={items.length}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => <div style={style}>{items[index]}</div>}
  </List>
);

4. 懒加载和代码拆分

使用React的懒加载和代码拆分功能可以减少初始加载时间和内存占用。例如，使用React.lazy和React.Suspense来懒加载组件。

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </React.Suspense>
  );
}

5. 优化状态管理

最小化状态的使用范围：只将状态提升到必要的层级，避免不必要的组件重新渲染。
避免直接修改状态：始终使用状态更新函数（如setState或useState）来更新状态。
使用不可变数据结构：确保状态更新时创建新的对象，而不是直接修改旧对象。

6. 避免匿名函数和对象

在render方法中避免创建匿名函数和对象，因为它们会在每次渲染时创建新的实例，可能导致不必要的子组件更新。

// 避免这样做：
<button onClick={() => console.log('Clicked')}>Click me</button>

// 推荐这样做：
const handleClick = () => console.log('Clicked');
<button onClick={handleClick}>Click me</button>

7. 避免昂贵的计算

避免在render方法中进行昂贵的计算，如排序、过滤等。可以将这些操作放在useMemo或生命周期方法中。

8. 使用生产版本的React

在生产环境中，确保使用React的生产版本。生产版本中没有开发时的警告和额外的检查，体积更小，性能更好。

9. 优化图片和媒体资源

使用适当的图片格式：如WebP可以减少图片文件大小。
懒加载图片：使用loading="lazy"属性或懒加载库来延迟加载不可见的图片。

10. 利用浏览器缓存

使用缓存控制头：确保静态资源使用缓存。
Service Workers：利用Service Workers缓存资源，实现离线访问和更快的加载时间。

11. 减少bundle体积

Tree Shaking：使用工具如Webpack的Tree Shaking来移除未使用的代码。
按需加载：只加载必要的模块。

12. 使用性能分析工具

React Profiler：React的Profiler工具可以帮助分析组件的性能瓶颈。
浏览器开发工具：如Chrome DevTools中的Performance和Network面板。

13. 避免不必要的Reconciliation

Key属性：在列表组件中使用唯一的key属性，帮助React识别哪些项目被更改、添加或移除，从而避免不必要的DOM操作。

总结：通过这些优化技术和策略，可以有效提高React应用的性能，减少不必要的渲染，提升用户体验。这些方法可以单独使用，也可以结合使用，根据应用的具体情况和需求进行调整。

说说react性能优化的手段有哪些?