React Hooks：使用 useCallback 和 useMemo 提升性能

前端

2023-09-20 20:58:48

在 React 应用程序中，性能是一个至关重要的因素。流畅、响应迅速的用户体验是至上之选。而 React Hooks，特别是 useCallback 和 useMemo，为我们提供了优化组件性能的有力武器。

useCallback

useCallback 是一个 React Hook，它让我们创建不会随着每次组件重新渲染而重新创建的回调函数。这对于那些昂贵且不依赖于组件状态或道具的回调函数特别有用。

使用场景：

回调函数中涉及复杂逻辑或昂贵的计算。
回调函数作为 prop 传递给子组件。
回调函数在事件处理程序中使用。

useMemo

useMemo 与 useCallback 类似，但它缓存的是一个值，而不是一个函数。useMemo 非常适用于那些昂贵的计算或操作，其结果在组件的后续渲染中保持不变。

使用场景：

计算或操作涉及复杂算法或耗时操作。
计算或操作的结果取决于 props 或 state，但不会在组件重新渲染时发生变化。
计算或操作的结果用于多个组件中。

示例：

使用 useCallback 优化事件处理程序：

import React, { useState, useCallback } from 'react';

const Button = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    // 昂贵的计算或操作
    console.log(`按钮被点击了 ${count} 次`);
  }, [count]);

  return <button onClick={handleClick}>点击</button>;
};

使用 useMemo 优化复杂计算：

import React, { useState, useMemo } from 'react';

const Component = () => {
  const [numbers, setNumbers] = useState([1, 2, 3]);

  const sum = useMemo(() => {
    // 复杂计算
    return numbers.reduce((a, b) => a + b, 0);
  }, [numbers]);

  return <p>和为：{sum}</p>;
};