IT技术 - 为什么我的简单react组件打印控制台两次？ - 吾爱随笔录

我制作了一个简单的组件，当单击按钮时，数字状态“a”会增加。

我console.log()在组件内部编写以检查它何时呈现。我希望在console.log单击按钮时执行一次，因为组件的状态已更改。

但是，我错了，console.log()被执行了两次。

有什么问题吗？还是正确的？我错过了什么？

这是我的代码

jsx

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;

索引.jsx

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 开发工具 Profiler 以检查当单击按钮并更改状态时组件是否真的渲染了两次。它在下面显示了我的结果

我认为只有一个渲染。如果组件真的渲染了一次，为什么 console.log 会执行两次？