当useCallback缺少依赖项时，React useState和useCallback钩子如何工作

Question

我最近正在研究react-hook。我遇到了一个问题，使我在练习过程中无法理解。

import React, { useState, useCallback } from 'react';
const set = new Set();

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

  const changeValue = useCallback(() => {
    setCount(count + 1);
  }, []); 

  set.add(count);
  console.log('size: ', set.size);

  return(
    <div>
      <p>Hello React Hook</p>
      <p>{count}</p>
      <button onClick={changeValue}>count++</button>
    </div>
  )
}

export default Demo;

// If you click the button multiple times, the output is:
// size: 1
// size: 2
// size: 2

我用react-hook编写了一个计时器。如我所料，显示的计数值始终为1，因为我没有将count用作useCallback的依赖项。]

但是我不明白console.log('size: ', set.size)只打印了三遍，为什么？每次单击count++按钮，都会使演示功能重新执行。因此，每次单击按钮时，是否不应该执行console.log('size: ', set.size)？但实际上，它只执行了3次。

为什么size保持2不变？我知道setCount每次都会替换一个新的count，因此size不应增加？

请帮助我回答我的疑问，非常感谢。

您可以测试我的代码here。

我最近正在研究react-hook。我遇到了一个问题，使我在练习过程中无法理解。从'react'导入React，{useState，useCallback}; const set = new ...

Answer 1

Demo组件将在其状态更改时重新呈现。因此，当您将计数状态添加到集合中时，它的大小将为1：

Answer 2

由于在设置状态函数中引用了先前的状态，因此应使用回调来设置状态。