React class 组件仅在 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 打印一次“render”。

Chrome 打印“render”两次。

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

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 都打印一次“render”。

为什么？

Answer 1

问题是 Strict Mode used by default when you create the project with create-react-app:

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

删除它解决了问题。

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

React class component renders twice on Chrome only

typescript

reactjs

react-tsx