陷入闭包：理解 React 状态管理中的怪癖

news2025/5/19 4:24:13

在这里插入图片描述
TLDR

闭包就像函数随身携带的背包，包含它们创建时的数据
React 组件使用闭包来记住它们的状态和属性
过时的闭包可能导致状态更新不如预期时的错误
函数式更新提供了一个可靠的方式来处理最新状态

简介
你是否曾经疑惑过，为什么有时你的 React 状态更新不太对劲？或者为什么快速多次点击按钮并没有如预期地更新计数器？答案在于理解闭包以及 React 如何处理状态更新。在这篇文章中，我们将通过简单的例子来解开这些概念，让一切变得清晰。

什么是闭包？
可以把闭包想象成一个函数，它保留了一丝它出生地的记忆。它就像一张所有在函数创建时存在的变量的即时照片。让我们通过一个简单的计数器来看这个概念的实际应用：

function createPhotoAlbum() {
let photoCount = 0; // 这是我们“快照”变量
functionaddPhoto() {
    photoCount += 1; // 这个函数“记得”photoCount
    console.log(`相册中的照片: ${photoCount}`);
  }
functiongetPhotoCount() {
    console.log(`当前照片数: ${photoCount}`);
  }
return { addPhoto, getPhotoCount };
}

const myAlbum = createPhotoAlbum();
myAlbum.addPhoto(); // "相册中的照片: 1"
myAlbum.addPhoto(); // "相册中的照片: 2"
myAlbum.getPhotoCount(); // "当前照片数: 2"

在这个例子中，addPhoto 和 getPhotoCount 函数都记得 photoCount 变量，即使 createPhotoAlbum 已经执行完毕。这就是闭包的作用——函数记得它们的出生地！

为什么闭包在 React 中很重要
在 React 中，闭包在组件如何记住它们的状态方面扮演着关键角色。这里有一个简单的计数器组件：

function Counter() {
const [count, setCount] = useState(0);
constincrement = () => {
    // 这个函数对 'count' 形成闭包
    setCount(count + 1);
  };
return (
    <>
      Count: {count}
      <button onClick={increment}>Add One</button>
    </>
  );
}
increment

increment 函数围绕 count 状态变量形成了一个闭包。这就是它“记得”按钮点击时应该增加哪个数字的方式。

问题：过时的闭包
这里事情变得有趣了。让我们创建一个可能导致意外行为的场景：

function BuggyCounter() {
const [count, setCount] = useState(0);
constincrementThreeTimes = () => {
    // 所有这些更新看到的都是同一个 'count' 值！
    setCount(count + 1); // count 是 0
    setCount(count + 1); // count 仍然是 0
    setCount(count + 1); // count 仍然是 0！
  };
return (
    <>
      Count: {count}
      <button onClick={incrementThreeTimes}>Add Three</button>
    </>
  );
}

如果你点击这个按钮，你可能会期望计数增加 3。但惊喜！它只增加了 1。这是因为“过时的闭包”——我们的函数被困在查看它创建时的原始 count 值。这就像拍了三张显示数字 0 的白板的照片，然后试图给每张照片加 1。每张照片上仍然会是 0！

解决方案：函数式更新

React 提供了一个优雅的解决方案来解决这个问题——函数式更新：

function FixedCounter() {
const [count, setCount] = useState(0);
constincrementThreeTimes = () => {
    // 每次更新都建立在之前的基础上
    setCount(current => current + 1); // 0 -> 1
    setCount(current => current + 1); // 1 -> 2
    setCount(current => current + 1); // 2 -> 3
  };
return (
    <>
      Count: {count}
      <button onClick={incrementThreeTimes}>Add Three</button>
    </>
  );
}

我们不再使用闭包中的值，而是告诉 React“取当前的值并加 1”。这就像有一个总是先查看白板上当前数字再进行添加的有帮助的助手！

真实世界示例：社交媒体点赞按钮
让我们看看这在真实世界场景中的应用——社交媒体帖子的点赞按钮：

function SocialMediaPost() {
const [likes, setLikes] = useState(0);
const [isProcessing, setIsProcessing] = useState(false);

// 有问题的版本 - 可能错过快速点击
consthandleLikeBuggy = async () => {
    if (isProcessing) return;
    setIsProcessing(true);
    awaitupdateLikeInDatabase(likes + 1); // 使用过时的 'likes' 值
    setLikes(likes + 1);
    setIsProcessing(false);
  };

// 修复版本 - 捕获所有点击
consthandleLikeFixed = async () => {
    if (isProcessing) return;
    setIsProcessing(true);
    // 使用函数式更新确保我们有最新的计数
    setLikes(currentLikes => {
      updateLikeInDatabase(currentLikes + 1);
      return currentLikes + 1;
    });
    setIsProcessing(false);
  };

return (
    <button onClick={handleLikeFixed}>Like Post ({likes})</button>
  );
}