<h1>“useCallback”和“useMemo”傻傻分不清楚？你赶紧进来瞧瞧！</h1>

2023-08-25 11:59:56

用 useCallback 和 useMemo 提升 React 应用性能

在 React 中，useCallback 和 useMemo 是提升性能的两大法宝，它们帮助我们避免在组件重新渲染时执行不必要的计算或函数调用。然而，许多开发者常常混淆它们的用法，导致适得其反，甚至拖累程序性能。本文将深入探讨 useCallback 和 useMemo 的区别和应用场景，让你在 React 项目中游刃有余，代码运行快如闪电。

useCallback：记住函数引用

useCallback 的主要作用是记忆函数引用 ，确保在组件重新渲染时，函数引用保持不变。这对于那些需要在组件重新渲染时保持不变的函数非常有用，比如事件处理函数。

举个例子：

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

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

  const handleClick = useCallback(() => {
    alert("你点击了按钮！");
  }, [count]);

  return (
    <div>
      <p>你点击了按钮 {count} 次。</p>
      <button onClick={handleClick}>点击我</button>
    </div>
  );
};

在这个示例中，我们使用 useCallback 记忆 handleClick 函数，当组件重新渲染时， handleClick 的引用不会改变，因此即使点击按钮触发组件重新渲染，也不会重复弹出发出 "你点击了按钮！" 的弹窗。

useMemo：记住值

useMemo 的作用是记忆值 ，确保在组件重新渲染时，值不会重新计算。这对于那些需要在组件重新渲染时保持不变的值非常有用，比如一些耗时的计算结果。

举个例子：

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

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

  const listData = useMemo(() => {
    // 这里进行一些耗时的计算
    return [];
  }, [count]);

  return (
    <div>
      <p>你点击了按钮 {count} 次。</p>
      <ul>
        {listData.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};