react优化

在使用 React 进行开发时，性能优化是确保应用流畅、高效运行的重要环节。

1. 使用 React.memo

React.memo 是一个高阶组件，用于缓存组件的渲染结果，防止不必要的重新渲染。它类似于类组件中的 shouldComponentUpdate。

const MyComponent = React.memo(function MyComponent(props) {
  /* 组件逻辑 */
});

2. 使用 useMemo 和 useCallback

• useMemo 用于缓存计算结果，只有在依赖项发生变化时才重新计算。

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

• useCallback 用于缓存函数引用，防止不必要的函数重新创建。

  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);
  

3. 避免匿名函数和对象

在渲染过程中，尽量避免创建匿名函数和对象，因为它们会在每次渲染时创建新的引用，导致不必要的重新渲染。

// 避免这样做
<button onClick={() => doSomething()}>Click me</button>

// 可以这样做
const handleClick = () => doSomething();
<button onClick={handleClick}>Click me</button>

4. 分解组件

将大型组件拆分为小型、可复用的组件，可以减少每个组件的渲染工作量，同时提高可维护性。

5. 使用动态导入（代码分割）

通过动态导入组件，可以实现按需加载，减少初始加载时间。

import React, { Suspense } from 'react';

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

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

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

根据应用的复杂性选择合适的状态管理工具。例如，对于简单的状态管理，可以使用 React 内置的 useState 和 useReducer，而对于复杂的状态管理，可以使用 Redux、MobX 等。

7. 避免不必要的状态提升

将状态提升到最近的共同父组件，只在需要时提升状态，避免不必要的重新渲染。

8. 避免频繁的状态更新

批量更新状态，避免在短时间内频繁更新状态。例如，使用 useReducer 代替多个 useState，减少多次状态更新的开销。

9. 使用 shouldComponentUpdate 或 PureComponent

对于类组件，可以使用 shouldComponentUpdate 或继承 PureComponent 来防止不必要的重新渲染。

class MyComponent extends React.PureComponent {
  /* 组件逻辑 */
}

10. 使用 React Profiler

React 提供了 Profiler 工具，可以帮助你分析组件的性能瓶颈。你可以在 React DevTools 中使用它，或者在代码中添加 Profiler 组件。

import { Profiler } from 'react';

function onRenderCallback(
  id, // 发生提交的 Profiler 树的 "id"
  phase, // "mount" 或 "update"
  actualDuration, // 本次更新 committed 花费的渲染时间
  baseDuration, // 估计的最初 render 花费的时间
  startTime, // 本次更新开始的时间
  commitTime, // 本次更新 committed 的时间
  interactions // 属于本次更新的 interactions 的集合
) {
  console.log({ id, phase, actualDuration, baseDuration, startTime, commitTime, interactions });
}

<Profiler id="MyComponent" onRender={onRenderCallback}>
  <MyComponent />
</Profiler>

11. 虚拟化长列表

对于长列表，使用虚拟化技术只渲染可视区域的列表项，例如使用 react-window 或 react-virtualized 库。

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>
);

12. 使用静态类型检查

使用 TypeScript 或 Flow 进行静态类型检查，可以捕获许多潜在的错误，并提高代码的可读性和可维护性。