闭包和 useState 钩子答案

【问题标题】：closures and useState hook闭包和 useState 钩子
【发布时间】：2021-01-12 06:55:35
【问题描述】：

我有点难以理解 React Hooks 和闭包，我找不到我的问题的简单答案。

这是一个代码 sn-p Codesandbox

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

       return (
         <div>
           {count}
           <button
             onClick={() => {
               setCount(count + 1);
               setCount(count + 1);
             }}
            >
             Increase
           </button>
        </div>
       );
   }

我不明白的是，如何使我调用 setCount 两次，加 1 两次并单击显示 2 的事实

【问题讨论】：

@CertainPerformance 已经让我无法回答了，但这是我用来说明这个问题和解决方案的 codesandbox 演示。

标签： reactjs react-hooks closures use-state

【解决方案1】：

更新是批量和异步的。当调用状态设置器时，React 将使用新值对状态的更新进行排队。所以，调用：

setCount(count + 1);

很快就会告诉 React 用 count + 1 重新渲染 WatchCount。

调用setCount(count + 1); 两次没有任何作用，因为这两次都是在告诉 React 设置相同的新状态 - 例如，如果 count 从 0 开始，则两次调用都将导致 setCount(1)。

（请记住，count 变量是用 const 声明的 - 在下一个渲染周期，当再次调用该函数时，它的值才会改变）

如果您出于某种原因想用两个单独的语句将两个添加到 count，您可以这样做的一种方法是使用 回调表单，它采用 React 的当前状态值作为论据：

setCount(count => count + 1);
setCount(count => count + 1);

这将导致第一个 setCount 增加状态，然后将新状态作为参数传递给 第二个 setCount，因此它将再次增加。 p>

【讨论】：