Skip to main content

React 函数组件性能优化

1. 避免不必要的重渲染​

React.memo​

用于缓存组件，只有当 props 发生变化时才重新渲染。

为什么需要 memo：

  1. React 的默认行为是只要父组件重新渲染，所有子组件都会重新渲染
  2. 即使传入子组件的 props 没有变化，子组件也会重新渲染
  3. 对于复杂组件，不必要的重渲染会导致性能浪费
import { memo } from 'react';

const ChildComponent = memo(function ChildComponent({ data }) {
  console.log('Child render');
  return <div>{data}</div>;
});

// 使用自定义比较函数
const MemoizedComponent = memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.data === nextProps.data;
});

useMemo 缓存计算结果​

为什么需要 useMemo：

  1. 每次组件重新渲染时，内部的函数都会重新执行
  2. 如果计算过程复杂或数据量大，会影响性能
  3. 如果计算结果作为其他 hooks 的依赖，可能导致不必要的副作用执行
import { useMemo } from 'react';

function ExpensiveComponent({ data }) {
  // 缓存计算结果
  const processedData = useMemo(() => {
    return data.filter(item => item.active)
              .map(item => expensiveCalculation(item));
  }, [data]);

  return <div>{processedData.map(item => (
    <Item key={item.id} data={item} />
  ))}</div>;
}

useCallback 缓存函数​

为什么需要 useCallback：

  1. 每次渲染时创建新的函数会导致子组件不必要的重渲染
  2. 当函数作为 useEffect 的依赖项时，新函数会导致 effect 重新执行
  3. 在事件处理函数中，可能需要保持函数引用的一致性
import { useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // 缓存回调函数
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []); // 空依赖数组，函数永远不会改变

  return <ChildComponent onClick={handleClick} />;
}

2. 状态管理优化​

状态拆分​

将大型状态对象拆分为多个小型状态：

为什么需要拆分状态：

  1. 大对象状态更新时，即使只改变一个属性也会导致整个组件重新渲染
  2. 状态之间可能没有关联，但更新一个会影响其他状态
  3. 拆分后的状态更容易管理和维护
// 不推荐
const [state, setState] = useState({
  users: [],
  loading: false,
  error: null,
  page: 1
});

// 推荐
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [page, setPage] = useState(1);

使用 useReducer 管理复杂状态​

const initialState = { count: 0, step: 1 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'decrement':
      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

3. 列表渲染优化​

使用合适的 key​

为什么不推荐使用索引作为 key：

  1. 列表项顺序改变时，索引会变化，导致不必要的 DOM 操作
  2. 可能导致组件状态错乱
  3. 影响 React 的 diff 算法效率
// 不推荐
{items.map((item, index) => (
  <ListItem key={index} item={item} />
))}

// 推荐
{items.map(item => (
  <ListItem key={item.id} item={item} />
))}

虚拟列表​

使用 react-window 或 react-virtualized 处理长列表： 为什么需要虚拟列表：

  1. 渲染大量 DOM 节点会导致性能问题
  2. 即使不可见的元素也会占用内存和计算资源
  3. 滚动时会导致页面卡顿
import { FixedSizeList } from 'react-window';

function Row({ index, style }) {
  return (
    <div style={style}>
      Row {index}
    </div>
  );
}

function VirtualList() {
  return (
    <FixedSizeList
      height={400}
      width={300}
      itemCount={1000}
      itemSize={35}
    >
      {Row}
    </FixedSizeList>
  );
}

4. 延迟加载​

React.lazy 和 Suspense​

为什么需要延迟加载：

  1. 减少首屏加载时间
  2. 按需加载组件，减少不必要的网络请求
  3. 优化用户体验，加快页面响应速度
import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

5. 事件处理优化​

防抖和节流​

为什么需要防抖和节流：

  1. 防止频繁触发事件导致性能问题
  2. 减少不必要的服务器请求
  3. 优化用户体验，避免页面卡顿
import { useMemo } from 'react';
import debounce from 'lodash/debounce';

function SearchInput() {
  const debouncedSearch = useMemo(
    () => debounce((query) => {
      // 执行搜索
      performSearch(query);
    }, 300),
    []
  );

  return (
    <input
      type="text"
      onChange={(e) => debouncedSearch(e.target.value)}
    />
  );
}

6. 条件渲染优化​

避免不必要的条件渲染​

// 不推荐
function Component({ count }) {
  if (count > 0) {
    return <ExpensiveComponent count={count} />;
  }
  return null;
}

// 推荐
function Component({ count }) {
  const shouldRender = count > 0;
  
  return shouldRender ? <ExpensiveComponent count={count} /> : null;
}

7. Context 优化​

为什么需要拆分 Context：

  1. 避免不相关状态更新导致所有消费组件重新渲染
  2. 提高代码可维护性
  3. 更好的性能和更清晰的数据流
// 不推荐
const AppContext = createContext();

// 推荐
const ThemeContext = createContext();
const UserContext = createContext();
const SettingsContext = createContext();

使用 Context 选择器​

function DeepChild() {
  // 只订阅需要的状态
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  
  return <div style={{ color: theme.color }}>{user.name}</div>;
}

8. 开发工具​

React DevTools Profiler​

使用 React DevTools 的 Profiler 工具来识别性能瓶颈：

  • 检测组件渲染时间
  • 查找不必要的重渲染
  • 分析组件树的更新

性能监控​

import { Profiler } from 'react';

function onRenderCallback(
  id, // 发生提交的 Profiler 树的 "id"
  phase, // "mount" （首次挂载）或 "update" （重渲染）
  actualDuration, // 本次更新在渲染完成之前耗费的时间
  baseDuration, // 估计不使用 memoization 的情况下渲染整颗子树需要的时间
  startTime, // 本次更新开始渲染的时间
  commitTime, // 本次更新在 DOM 上提交完成的时间
  interactions // 属于本次更新的 interactions 的集合
) {
  // 记录或上报性能数据
  console.log(`${id} 渲染耗时: ${actualDuration}`);
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <Component />
    </Profiler>
  );
}