如何解决React Hook闭包问题？

Question

如何解决React Hook闭包问题？

31


import React, { useState } from "react";
import ReactDOM from "react-dom";

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

  function handleAlertClick() {
    return (setTimeout(() => {
      alert("You clicked on: " + count);
    }, 3000))
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={handleAlertClick}>Show alert</button>
    </div>
  );
}

我只是想知道这个是否按照我想的那样工作，或者是否有更好的解释！

无论何时调用setState方法，状态都会获得一个新的引用。这意味着原始状态没有新值，而是创建了一个具有新值的新状态。当我们点击第二个按钮时，事件处理程序函数捕获了原始状态的引用。

即使我们多次点击第一个按钮，当警报被显示时，它将显示事件处理程序捕获其引用的状态的值。

这正确吗？

- A2ub

你遇到了什么问题？ - Tushar

我只是问一下我理解的是否正确!! 每当调用setState方法时，状态都会获得一个新引用。这意味着原始状态没有新值，而是创建了一个具有新值的新状态。当我们单击第二个按钮时，事件处理程序函数捕获原始状态的引用。即使我们多次单击第一个按钮，当警报显示时，它将显示事件处理程序捕获其引用的状态的值。 - A2ub

你在这里提到的操作有什么问题吗？我没有看到任何问题，点击5次，然后点击第二次，弹出消息提示"已点击5次"。没有问题。 - Dawei

2个回答

1

https://dmitripavlutin.com/react-hooks-stale-closures/#32-usestate

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

  const handleAlertClick = () => {
    setTimeout(() => {
      alert(`count is: ${count}`);
    }, 3000);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount((count) => count + 1);
        }}
      >
        Click me
      </button>
      <button onClick={handleAlertClick}>Show alert</button>
    </div>
  );
}

- Volodymyr Buts

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- subashMahapatra · Accepted Answer

< p >弹出框显示过时的“count”值的原因是传递给setTimeout的回调引用了被闭包捕获的“count”的过时值。这通常称为“陈旧的闭包”。

在初次渲染时，传递为setTimeout回调的匿名函数将“count”的值捕获为0，当单击“显示警报”按钮时，回调被排队等待执行，但使用的仍是已过时的“count”值。

在上述情况下，解决显示计数器更新值并修复“陈旧的闭包”问题最简单的方法是使用ref。

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

  const latestValue = useRef(count);

  const handleAlertClick = () => {
    setTimeout(() => {
      alert(`count is: ${latestValue.current}`);
    }, 3000);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(prev => {
            latestValue.current = prev + 1;
            return prev + 1;
          });
        }}
      >
        Click me
      </button>
      <button onClick={handleAlertClick}>Show alert</button>
    </div>
  );
}

在 codesandbox 上有工作演示。

钩子（Hooks）在工作时严重依赖闭包，因此很可能会遇到陈旧的闭包（stale-closures）问题。这里有一篇不错的文章，介绍了在使用React Hooks 时如何解决陈旧闭包问题，并演示了在某些情况下如何解决其中一些问题。