React Hook 中的闭包陷阱详解

概述

React Hook 中的闭包陷阱是使用 Hooks 时最容易遇到的问题之一，它指的是在 useEffect、useCallback 等 Hooks 的回调函数中，访问到的 state 或 props 是旧的值，而不是最新的值。

闭包陷阱的根本原因

要理解闭包陷阱，首先需要理解两个核心概念：

React 的渲染机制

每一次组件的 state 或 props 发生变化，React 都会重新执行整个函数组件来产生一个新的渲染结果。这意味着每一次渲染，组件内的所有函数（包括 useEffect 的回调函数、事件处理函数等）都是全新的。

JavaScript 的闭包

函数会"记住"并访问其创建时所在的作用域中的变量。

陷阱的产生过程

闭包陷阱的产生过程是这两个机制的结合：

1. 当组件首次渲染时，useEffect 或 useCallback 设置了一个回调函数。这个回调函数就形成了一个闭包，它捕获了当时的 state 和 props
2. 假设 useEffect 的依赖项数组是空的 ([])，这意味着这个 effect 只会在组件挂载时运行一次
3. 当后续 state 发生变化，组件会重新渲染。React 会创建一个新的 state 变量，但由于 useEffect 的依赖项是空的，它的回调函数不会重新创建，仍然是首次渲染时创建的那个旧函数
4. 因此，当这个旧的回调函数（例如在一个 setInterval 或异步事件中）被执行时，它访问的 state 依然是它被创建时捕获的那个旧值，而不是最新的 state 值

典型示例

最经典的例子就是用 useEffect 实现一个每秒更新的计数器：

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

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      // 这个回调函数形成了一个闭包
      // 它捕获的 count 永远是组件首次渲染时的值：0
      console.log(`Interval log: ${count}`); // 会一直打印 0
      setCount(count + 1); // 实际上每次都是 setCount(0 + 1)
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // 依赖项为空，effect 只运行一次

  return <h1>{count}</h1>; // 页面上会显示 1，然后就不再变化
}

在这个例子中，useEffect 的回调只在初始渲染时运行一次。它内部的 setInterval 回调捕获了当时的 count 值，也就是 0。之后无论组件如何重新渲染，setInterval 里的回调函数引用的 count 永远是 0。

解决方案

针对闭包陷阱，有以下几种成熟的解决方案：

方案一：正确添加依赖项（推荐）

这是最符合 React Hooks 设计思想的方案。通过将 state 或 props 添加到依赖项数组中，我们可以告诉 React，当这些值变化时，需要重新创建 effect 回调函数，这样它就能捕获到最新的值。

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('Creating new interval with count:', count);
      setCount(prevCount => prevCount + 1); // 使用函数式更新，更安全
    }, 1000);

    return () => {
      console.log('Cleaning up interval for count:', count);
      clearInterval(intervalId);
    };
  }, [count]); // 依赖项数组中加入了 count

  return <h1>{count}</h1>;
}

工作原理：

每次 count 改变，useEffect 都会先执行上一次的清理函数（clearInterval），然后重新执行 effect，创建一个新的 setInterval。这个新的 setInterval 的回调函数捕获了最新的 count 值。

注意

这种方案的缺点是会频繁地创建和销毁定时器，对于定时器这种场景可能不是最优的，但对于大多数 useEffect 场景（如数据请求）来说是标准做法。

方案二：使用函数式更新

如果你的更新逻辑依赖于前一个状态，使用 setState 的函数式更新形式是避免闭包陷阱的绝佳方式。你不需要在依赖项中添加 state。

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      // React 会确保 prevCount 是最新的 state 值
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // 依赖项可以为空

  return <h1>{count}</h1>;
}

工作原理：

setCount(updaterFn) 中的 updaterFn 函数（即 prevCount => prevCount + 1）在执行时，React 会将当前最新的 state 值作为参数（prevCount）传给它。这样，我们的回调函数就不再需要从外部闭包中捕获 count 值了，从而完美避开了陷阱。

方案三：使用 useRef 存储最新的值

useRef 创建的 ref 对象在组件的整个生命周期内保持不变，我们可以用它来手动存储和读取最新的 state 或 props。

import React, { useState, useEffect, useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  // 每次渲染都更新 ref 的值
  useEffect(() => {
    countRef.current = count;
  });

  useEffect(() => {
    const intervalId = setInterval(() => {
      // 从 ref 中读取最新的 count 值
      setCount(countRef.current + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // 依赖项为空

  return <h1>{count}</h1>;
}

工作原理：

1. useRef 创建了一个可变的对象 { current: ... }
2. 我们用一个额外的 useEffect（没有依赖项）来确保每次组件渲染后，都将最新的 count 值同步到 countRef.current 中
3. 在 setInterval 回调中，我们总是通过 countRef.current 来访问 count，因为 countRef 对象本身是稳定的，所以 setInterval 的闭包可以一直持有对它的引用，并读取到最新的 current 属性

使用场景

这种方法稍微复杂一些，但在某些场景下（比如需要在一个 useCallback 中访问最新的 state，但又不希望 state 变化导致 useCallback 重新创建）非常有用。

总结

陷阱原因： 函数组件每次渲染都会产生新的闭包。如果 Hooks（如 useEffect）的依赖项不正确，其回调函数可能还是旧的闭包，从而捕获了旧的 state 或 props。

核心解决方案：

1. 添加依赖项：最标准的做法，让 React 在依赖变化时重新创建闭包
2. 函数式更新：当更新依赖于旧状态时，这是最简洁、高效的方案，可以避免添加依赖
3. 使用 useRef：作为一种手动管理值的手段，当以上两种方法不适用时，useRef 可以作为"逃生舱口"，确保我们能访问到最新的值

正确理解和运用这些方案，是写出健壮、可预测的 React Hooks 代码的关键。