Компонент класса React отображается дважды только в Chrome

Я создаю проект с помощью 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 печатают «рендеринг» один раз.

Почему?


reactjs typescript react-tsx
person cahen    schedule 11.05.2020    source источник
comment
В моем Chrome он отображается только один раз: codepen.io/Squeegy/pen/yLYEPJx?editors =0010   -  person Alex Wayne    schedule 12.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Проблема заключается в строгом режиме, используемом по умолчанию при создании проекта с create-react-app:

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

Его удаление решило проблему.

person cahen    schedule 12.05.2020
comment
Верно, но как ты это узнал? - person Mohammed Ramadan; 24.07.2020
comment
Я не делал, пока не удалил его. Я до сих пор не знаю, почему он отображается дважды. - person cahen; 24.07.2020