为什么react钩子setState总是执行两次

Question

我点击按钮div，控制台打印

click
111
setState
111
setState

为什么setState总是执行两次这是我的代码

function App() {
const [num, setNum] = useState(0);
console.log('111');
return (
<div>
{num}
<div onClick={ () => {
console.log('click');
setNum( num => {
console.log('setState');
return num + 1;
})
}}>button</div>
</div>
)
}

Answer 1

在index.jsremove中，此<React.StrictMode> </ React.StrictMode>和u将只看到它渲染一次。

Answer 2

但是点击后的num是否等于2或1？

也许这个表格会更好用？

function App() {
const [num, setNum] = useState(0);
console.log('111');
return (
<div>
{num}
<div onClick={ () => {
console.log('click');
setNum(num + 1)
}}>button</div>
</div>
)
}

还可以尝试使用按钮进行单击，而不是使用div？