Question

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仅被打印一次。

请原谅此问题，或者我的问题标题与我的要求无关，因为这是我的第一个问题。

Answer 1

这是因为React.StrictMode

如果转到index.js，则会发现App组件被<React.StrictMode>包装。如果取消StrictMode，您将注意到App组件将只渲染一次。

请参考以下文档，以了解StrictMode

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

类组件的构造函数，呈现器和shouldComponentUpdate方法类组件静态getDerivedStateFromProps方法功能组件主体状态更新程序功能（ setState）传递给useState，useMemo或useReducer的函数

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

Answer 2

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

这可以解决您的问题。

这个useState挂钩在React中如何工作？

2 个答案: