这个 useState 钩子在 React 中是如何工作的？ [复制]答案

【问题标题】：How does this useState hook work in React? [duplicate]这个 useState 钩子在 React 中是如何工作的？ [复制]
【发布时间】：2020-11-03 23:59:57
【问题描述】：

const App = () => {
   const [ counter, setCounter ] = useState(0)
   console.log(counter)

   return (
      <>
      <div>You clicked {counter} times.</div>
      <button onClick={ () => setCounter(counter+1) }>Click me!</button>
      </>
   )
}

这是我的反应组件。我的问题是当我运行它时，我在控制台中看到 0 两次。然后，当我单击按钮时，我在控制台中看到 1 两次。谁能解释为什么会这样？每次单击按钮时，我都希望 0、1、2 在控制台中仅打印一次。

如果这个问题已经得到回答，或者我的问题标题与我要问的内容无关，请原谅，因为这是我在这里的第一个问题。

【问题讨论】：

是的！谢谢。

标签： javascript reactjs

【解决方案1】：

return (<React.StrictMode><App /><React.StrictMode>)

这会解决你的问题。

【讨论】：

【解决方案2】：

是因为React.StrictMode

如果你去你的 index.js ，你会发现你的 App 组件被 <React.StrictMode> 包裹着。如果你去掉 StrictMode，你会注意到你的 App 组件只会渲染一次。

参考以下文档了解StrictMode

严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。这是通过有意双重调用以下函数来完成的：

类组件构造函数、渲染和 shouldComponentUpdate 方法类组件静态 getDerivedStateFromProps 方法功能组件体状态更新函数（第一个参数 setState) 传递给 useState、useMemo 或 useReducer 的函数

请参考：https://reactjs.org/docs/strict-mode.html

【讨论】：

感谢您的回答！我现在明白为什么我会看到两个控制台日志。