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

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

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

删除它可以解决问题。

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

1 个答案: