仅在Chrome上呈现两次React类组件

Question

我用创建反应-应用程序创建了一个项目

yarn create react-app example-react-ts --template typescript

然后创建了一个简单的组件：

import * as React from 'react'

interface ExampleProps {message: string}

class Example extends React.Component<ExampleProps> {
    render() {
        console.log("render")
        return (<div><p>{this.props.message}</p></div>)
    }
}

export default Example

Firefox只打印一次“呈现”。

Chrome打印“呈现”两次。

如果我用一个功能组件替换它：

import * as React from 'react'
interface ExampleProps {message: string}

export const Example = (props: ExampleProps) => {
    console.log("render")
    return (
        <div><p>{props.message}</p></div>
    );
}

export default Example

火狐和Chrome打印“呈现”一次。

为什么？

Answer 1

问题在于使用严格模式创建项目时默认使用的创建反应-应用程序

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

移除它解决了这个问题。