详解React中的useMemo和useCallback的区别

目录 前言 useMemo useCallback 优化的方向不同 总结：

前言

React 中的 useMemo 和 useCallback 是两个重要的 Hooks 。常常被用于优化组件的性能。虽然这两个Hooks看起来很相似，但它们彼此之间还是有很大的 区别 的。

useMemo

是用来 缓存计算结果 ，确保只有在依赖项发生变化时才会重新 计算 。 useMemo 的实现方式是通过缓存计算结果，当依赖项发生变化时，重新计算结果并返回。

useCallback

是用于 缓存函数 ，确保只有在依赖项发生变化时才会重新 创建函数 。 useCallback 的实现方式是缓存函数本身，当依赖项发生变化时，重新创建函数并返回。

优化的方向不同

虽然两个Hooks都用于优化性能，但它们优化的方向不同。

useMemo 优化的是计算结果的缓存，如果你需要经常使用某个函数，而这个函数的计算量很大，那么可以使用 useMemo 进行函数的缓存

而 useCallback 优化的是函数的缓存,而如果你需要将该函数传递给子组件，那么可以使用 useCallback 进行函数的缓存。

通过以下示例代码，可以更好地理解 useMemo 和 useCallback 之间的区别：

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

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

  const expensiveFunction = useMemo(() => {
    console.log('calculating...');
    let result = 0;
    for (let i = 0; i < count * 100000; i++) {
      result += i;
    }
    return result;
  }, [count]);

  const handleClick = useCallback(() => {
    console.log('clicked...');
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>count: {count}</p>
      <p>expensiveFunction: {expensiveFunction}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default MyComponent;

在上面的例子中，我们定义了一个 MyComponent 组件，其中包含了一个状态值 count 和一个计算量很大的函数 expensiveFunction 。

我们使用 useMemo 对 expensiveFunction 进行了缓存，在 count 发生变化时才会重新计算 expensiveFunction 。

我们使用 useCallback 对 handleClick 进行了缓存，在 count 发生变化时才会重新创建 handleClick 函数。

总结：

useMemo 用于缓存计算结果，确保只有在依赖项发生变化时才会重新计算。 useCallback 用于缓存函数，确保只有在依赖项发生变化时才会重新创建函数。 useMemo 优化的是计算结果的缓存，而 useCallback 优化的是函数的缓存。

如果需要经常使用某个函数，而这个函数的计算量很大，那么可以使用useMemo进行函数的缓存，而如果需要将该函数传递给子组件，那么可以使用useCallback进行函数的缓存。

原文地址：https://juejin.cn/post/7225534193995628600

查看更多关于详解React中的useMemo和useCallback的区别的详细内容...