Question

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

这是一个代码段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的事实

Answer 1

更新是分批的和异步的。调用状态设置器时，React将使用新值将对更新的更新排队。因此，致电：

setCount(count + 1);

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

两次调用setCount(count + 1);不会执行任何操作，因为两次都告诉React设置相同的新状态-例如，如果count从0开始，两次调用都会导致{{ 1}}。

（请记住，setCount(1)变量是用count声明的-直到下一次呈现周期，再次调用该函数时，它的值才会更改）

如果出于某种原因要使用两个单独的语句将两个添加到const中，您可以采用的一种方法是使用回调形式，该形式采用React的当前值状态作为参数：

count

这将导致第一个setCount(count => count + 1); setCount(count => count + 1);递增状态，然后将新状态作为参数传递给 second setCount，因此它将递增再次。

闭包和useState挂钩

1 个答案: