这是一篇关于 React Hooks 的技术文章翻译，原文地址： +https://dev.to/michael_osas/understanding-react-hooks-how-to-use-useref-usememo-and-usecallback-for-more-efficient-code-3ceh，翻译不当之处请指正。

+

译者评价

+

文章主要介绍了 useRef、useMemo 和 useCallback 3 个 React Hook，读者可以通过此文了解 3 种 Hook 的使用方式、场景，但文章也存在一些缺点：

+
    +
  1. 内容重复严重，如 useRef 的作用在文章前中后段中均有描述
    2. +
  2. useCallback 的示例举例不当，容易造成读者的困惑
    3. +
+

文章的内容只适合 3 个 React Hook 的基础泛读，因为示例足够简单，所以读者读起来并不会太大的压力。

+ +

正文开始

+

在不编写和使用类组件的情况下，React Hooks 是允许开发者在函数组件中管理 state（组件状态）和其它 React 特性的一组方法。React Hooks 改变了开发者编写 React 组件的方式，同时也加强了组件的可复用性和可维护性。本文详细地讨论了 React 3 个内置 Hook，分别为 useRef、useMemo 和 useCallback。通过内置的 Hooks，我们可以很容易地在不同组件中复用相同的、带状态的逻辑，这也使得代码更具可维护性和易读性。

+

React Hooks 是一组可以在函数组件中管理组件状态、执行特定动作和访问上下方的钩子函数，包括 useState、useEffect、useRef、useMemo 和 useCallback 等。

+

useRef 提供了存储可变值的方法，该引用值会在组件 render 期间持续存在。useRef 通常用于访问或修改 DOM 元素的属性值，比如输入框的值（value）、容器的滚动位置（offsetLeft、offsetTop）。与 useState 不同的是，更新 useRef 的值并不会触发组件的重新渲染，相应地，可以直接通过 useRef 返回引用对象的属性值直接进行访问或修改。

+

useMemo 可以缓存函数的返回值，当且仅当依赖改变时，才会重新计算函数的返回值。useMemo 非常适合于计算密集的组件编写，比如组件的渲染依赖于某项复杂的数据结构计算结果。useMemo 的第 2 个参数是一个由依赖项组成的数组，只有其中依赖项改变时，函数才会重新计算。

+

useCallback 缓存并返回一个函数，当且仅当依赖项改变时，才会重新创建函数实例。useMemo 适用于向子组件传递函数 prop ，从而减少子组件渲染的场景，其第 2 个参数也是一个依赖项数组，若依赖项改变时，函数才会重新创建。

+

一般情况下，React Hooks 可以将带状态逻辑（stateful logic）组件分解成更小，可组合的函数组件，这使得更容易地编写可复用和可维护的代码。使用 React Hooks 可以简化编写 React 组件过程，减少重复代码，使组件代码更具可读性。

+

好了，现在让我们更深入地理解这些 Hooks 吧。

+

useRef

+

在 React 中，useRef 可以创建并存储一个可变的引用值，相当于在类组件中的 ref 属性，但也有些许不同。

+

useRef 使用一个初始值作为参数，并返回一个可变的引用对象。引用对象的属性值可以直接地被访问和修改，并且值的改变不会造成组件的重新渲染。这对于要延后访问或设置 DOM 元素属性的场景十分有用

+

下面是使用 useRef 来保存引用对象，实现点击按钮完成输入框定焦的一个示例：

+
import { useRef } from "react";
+
+function ExampleUseRef() {
+  const inputRef = useRef<HTMLInputElement>(null);
+  function handleClick() {
+    inputRef?.current?.focus();
+  }
+  return (
+    <div>
+      <input type="text" ref={inputRef} />
+      <button onClick={handleClick}>Focus Input</button>
+    </div>
+  );
+}
+

上述代码中，ExampleUseRef 是一个使用 useRef 保存 RefObject（T 为 HTMLInputElement）的引用对象，引用的是一个 HTMLInputElement 对象。让我们进一步讨论下代码：

+

我们调用 useRef<HTMLInputElement>(null) 创建了一个 HTMLInputEelement 的引用，inputRef 的初始值为该引用。

+

用户点击“Focus Input”按钮时，handleClick 函数会被调用。在 handleClick 函数中，访问 inputRef 对象的 current 属性并调用 focus() 方法。

+

ExampleUseRef 组件返回一个包含 input 和 button 元素的 div 元素，input 元素的 ref 属性设置为 inputRef，这样就会创建一个 input 元素的引用。同时，把 button 元素的 onClick 属性设置为 handleClick 函数，当按钮被点击时，该函数会被调用。

+

综上所述，示例演示了如何在函数组件中创建一个 HTMLInputElement 的引用，然后通过 button 的 onClick 属性设置回调函数，最后在函数中使用引用对象的 current 属性调用 focus() 方法。通过使用 useRef，input 元素的引用会在组件渲染期间持续持有，这对于后期要访问或修改引用对象的属性非常有帮助。

+

useMemo

+

useMemo 缓存了计算密集型函数的执行结果，从而提高程序的性能。缓存技术是根据参数缓存函数的计算结果，如果传入相同的参数时，直接返回缓存结果，避免了重新计算结果。

+

useMemo 使用两个参数：一个是返回缓存值的函数，另一个是一组包含依赖项的数组。该函数只有在依赖项改变时，函数才会重新执行。如果依赖项在前后两次渲染相同时，则直接返回前一次缓存的函数返回值。下面是使用 useMemo 的详细示例：

+
import { useMemo } from "react";
+
+function ExampleUseMemo({ a, b }: { a: number; b: number }) {
+  const memoizedValue = useMemo(() => {
+    return a * b;
+  }, [a, b]);
+
+  return <div>Memoized Value: {memoizedValue}</div>;
+}
+

在上述示例中，useMemo 缓存了 a 和 b 的计算结果，这就意味着，如果 a 和 b 不发生改变，函数不会重新执行并且返回缓存值。这么做可以减少程序的计算时间，从而提高程序性能。

+

然而，值得注意的是，不是所有的场景都适合使用 useMemo。如果计算过程并不复杂或者组件不依赖于缓存值且频繁需要渲染，使用 useMemo 的性能提升并不会太显著，相反地，可能还会造成性能的损失。所以，我们要记住：如果缓存值是频繁修改的，相比于缓存计算值，直接渲染组件可能是更好的解决方案。

+

总结下来，useMemo 是一个优化 React 程序的性能有用的工具，但是在使用时，需要综合考虑其优缺点。

+

useCallback

+

useCallback 通过减少组件的非必要渲染从而提升程序的性能，该 Hook 会缓存一个函数，只有在依赖项改变时，useCallback 才会返回一个新的函数实例。

+

下面是 useCallback 的基础语法：

+
const memoizedCallback = useCallback(
+  () => {
+    // 函数体
+  },
+  [/* 依赖数组 */]
+);
+

useCallback 的语法和 useEffect 相似，第 1 个参数是你要缓存的函数，第 2 个参数是一个包含依赖项的可选数组。如果依赖项发生改变，则会重新计算要缓存的函数并返回。使用 useCallback 的一个好处是，它可以帮助程序减少组件不必要的渲染次数。

+

下面我们通过一个简单示例进行学习：

+
import { useEffect, useState } from "react";
+
+function ParentComponentWithoutUseCallback() {
+  const [count, setCount] = useState(0);
+  const handleClick = () => {
+    setCount(count + 1);
+  };
+  return (
+    <div>
+      <button onClick={handleClick}>Increment count</button>
+      <ChildComponentWithoutUseCallback />
+    </div>
+  );
+}
+
+function ChildComponentWithoutUseCallback() {
+  const [value, setValue] = useState(0);
+  const expensiveFunction = () => {
+    console.log("call expensiveFunction");
+    // 计算密集
+  };
+  useEffect(() => {
+    expensiveFunction();
+  }, [expensiveFunction]);
+  return <div>{value}</div>;
+}
+

这是一个包含两个 React 组件（ParentComponentWithoutUseCallback 和 ChildComponentWithoutUseCallback）的示例：

+

ParentComponentWithoutUseCallback：组件使用 useState 定义了一个状态变量 count，其初始值为 0，同时定义了一个 handleClick 的点击回调函数，其内部实现使用 setCount 实现 count 状态值的加 1 操作。

+

ParentComponentWithoutUseCallback 组件渲染时，页面上会渲染出一个带 button 元素的 div 元素。当 button 发生点击时，handleClick 函数会增加 count 值，但同时 ChildComponentWithoutUseCallback 组件也会发生渲染。

+

ChildComponentWithoutUseCallback：组件使用 useState 定义了一个状态变量 value，其初始值为 0，同时还定义了一个模拟复杂计算的函数 expensiveFunction。

+

当 ChildComponentWithoutUseCallback 组件完成挂载时，useEffect 内部会执行 expensiveFunction 函数。useEffect 函数使用两个参数，分别为一个函数和一个包含依赖项的数组。在这个示例中，第 1 个参数是 expensiveFunction 函数，第 2 个参数是包含 expensiveFunction 函数的数组。将 expensiveFunction 函数作为 useEffect 的依赖项，只有当 expensiveFunction 引用改变时，useEffect 才会重新执行 expensiveFunction 函数。

+

最后，ChildComponentWithoutUseCallback 组件返回一个带 value 状态变量的 div 元素。当然，这个示例也演示了如何使用 useState 和 useEffect 来管理组件状态和执行 efffect（副作用）。当 ParentComponentWithoutCallback 组件更新了 count 状态变量时，ChildComponentWithoutCallback 组件也会根据 useEffect 再次执行计算密集的 expensiveFunction 函数。

+

为了优化上述代码，我们计划使用 useCallback 来缓存计算密集的函数，只有当依赖项改变时，计算密集函数才会重新计算：

+
import { useEffect, useState } from "react";
+
+function ParentComponentUseCallback() {
+  const [count, setCount] = useState(0);
+  const handleClick = () => {
+    setCount(count + 1);
+  };
+  const memoizedFunction = useCallback(() => {
+    console.log("call memoizedFunction");
+    // 计算密集
+  }, []);
+  return (
+    <div>
+      <button onClick={handleClick}>Increment count</button>
+      <ChildComponentUseCallback expensiveFunction={memoizedFunction} />
+    </div>
+  );
+}
+
+function ChildComponentUseCallback({
+  expensiveFunction,
+}: {
+  expensiveFunction: () => void;
+}) {
+  const [value, setValue] = useState(0);
+  useEffect(() => {
+    expensiveFunction();
+  }, [expensiveFunction]);
+  return <div>{value}</div>;
+}
+

在上述示例中，除了使用 useCallback 定义 memoizedFunction 缓存函数，ParentComponentUseCallback 与之前的父组件类似。useCallback 用于缓存函数，所以不会每次渲染中重新创建。也正因如此，如果将缓存函数作为子组件的 prop，就可以减少子组件不必要的渲染次数。

+

在 ChildComponentUseCallback 子组件中，除了定义了一个 expensiveFunction prop 外，其它的与之前的子组件类似。因为 expensiveFunction 函数作为 prop 传入子组件，所以需要在父组件中定义 expensiveFunction 函数。在这个示例中，只有当 expensiveFunction 改变时，useEffect 才会重新执行 expensiveFunction。然而，在父组件中，我们使用了 useCallback 缓存计算密集函数，当父组件发生渲染，memoizedFunction 不会发生改变，从而避免了子组件的再次渲染。

+

最后，子组件返回一个带 value 状态变量的 div 元素。

+

简单点说，示例演示了在函数组件中如何使用 useCallback 才避免组件的多次渲染。同时，在示例中也结合了 useEffect 技术，将计算密集函数作为组件的 prop，从而减少计算密集函数的执行。

+

最终想法

+

总结来说，React Hooks 给开发者提供了在函数组件编写中管理组件状态更为简单的方式。

+

useRef 创建了一个 DOM 元素的可变的引用，在渲染中持续存在，允许开发者在造成组件重新渲染下直接访问或修改元素的属性。useMemo 可用于缓存计算密集型函数的返回值，只有当依赖项改变时才会重新计算值。useCallback 则是通过缓存一个函数，也是只当依赖项改变时，才会重新创建函数实例。

+

使用这些内置的 Hooks，如 useRef、useMemo 和 useCallback，开发者可以更高效管理组件状态，执行特定动作和访问上下文。通过将状态逻辑拆分到更小、可组合的函数组件中，使用 Hooks 编写出的组件更加简单，其可复用性、可读性得到加强。

+