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

Question

我用create-react-app创建了一个项目：

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

Firefox 和 Chrome 都打印“渲染”一次。

为什么？

Answer 1

问题是使用create-react-app创建项目时默认使用的Strict Mode：

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

删除它解决了问题。