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

【问题标题】：Why my simple react component print console twice?为什么我的简单反应组件打印控制台两次？
【发布时间】：2020-03-24 05:56:29
【问题描述】：

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

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

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

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

这是我的代码

A.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;

index.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 创建。就是这样。

谢谢。

****PLUS******

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

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

【问题讨论】：

清除您的控制台并再次单击该按钮。你确定它记录了两次吗？

标签： reactjs

【解决方案1】：

我认为这是因为React.StrictMode 这只会发生在开发中。如果您删除 React.StrictMode，您将只获得 1 条日志。

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

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

进一步阅读后，我也在 React 文档中发现了这一点：https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

希望这会有所帮助！

【讨论】：