为什么我的简单反应组件打印控制台两次？

Question

我做了一个简单的组件，当点击按钮时，状态a的数量会增加。

我在组件内部写了console.log（）来检查它何时呈现。我期望console.log在单击按钮时执行一次，因为组件的状态已更改。

但是，我错了，控制台。log（）执行两次。

有什么不对劲吗？还是正确？我错过了什么？

这是我的密码

import React, {useState} from 'react';

const A = () => {
    const [a, setA] = useState(0);
    const onClick = () => setA(a + 1);
    console.log('render')

    return (
        <div>
            <p>a : { a}</p>
            <button onClick = {onClick}>button</button>
        </div>
    )
}

export default A;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import A from './components/A';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <A />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

此应用程序由CRA使用typescript创建。这就是全部。

谢谢。

****加上******

我检查了React-dev tools Profiler，以检查在单击按钮并更改状态时组件是否真的呈现了两次。它在下面显示结果

我想只有一次渲染。如果组件确实渲染过一次，为什么要使用控制台。日志执行两次？

Answer 1

我认为这是因为React。StrictMode这只发生在开发中。如果删除React.StrictMode你将只得到1个日志。

有关更多详细信息，请查看react repo上的此线程：

https://github.com/facebook/react/issues/15074

进一步阅读后，我在React文档中也发现了以下内容：https://reactjs.org/docs/strict-mode.html#detecting-意外副作用

希望这能有所帮助！