双console.log除了组件didMount在React

Question

我试图更好地理解React组件的生命周期。我正在尝试将与React组件的生命周期相关的消息打印到控制台。在下面显示的组件中，我使用的是console。记录3次。但是，其中两个在控制台中打印两次。我用的是铬。这就是打印到控制台的内容。

Menu Component constructor is invoked
Menu Component constructor is invoked
Menu Componen render is invoked
Menu Componen render is invoked
Menu Component componentDidMount is invoked

为什么三个控制台中有两个是双重打印的。记录除componentDidMount之外的消息？谁来操纵控制台。componentDidMount的日志只打印一次。下面是组件的整个代码的编写方式：

import React, { Component } from 'react';
import { Card, CardImage, CardImgOverlay, CardText, CardBody, CardTitle, CardImg } from 'reactstrap';

class Menu extends Component {

    constructor(props) {
        super(props);

        this.state = {
            selectedDish: null
        }
        console.log('Menu Component constructor is invoked');
    }

    componentDidMount() {
        console.log('Menu Component componentDidMount is invoked');
    }

    onDishSelect(dish) {
        this.setState({ selectedDish: dish});
    }

    renderDish(dish) {
        if (dish != null) {
            return(
                <Card>
                    <CardImg width="100%" src={dish.image} alt={dish.name} />
                    <CardBody>
                        <CardTitle>{dish.name}</CardTitle>
                        <CardText>{dish.description}</CardText>
                    </CardBody>
                </Card>
            );
        } else {
            return(
                <div></div>
            );
        }
    }

    render() {

        const menu =  this.props.dishes.map((dish) => {
            return (
                <div key={dish.id} className="col-12 col-md-5 m-1">
                    <Card onClick={() => this.onDishSelect(dish)}>
                        <CardImg width="100%" src={dish.image} alt={dish.name} />
                        <CardImgOverlay>
                            <CardTitle>{dish.name}</CardTitle>
                        </CardImgOverlay>
                    </Card>
                </div>
            );
        });

        console.log('Menu Componen render is invoked');

        return (
            <div className="container">
                <div className="row">
                    {menu}
                </div>
                <div className="row">
                    {this.renderDish(this.state.selectedDish)}
                </div>
            </div>
        );
    }
}

export default Menu;

Answer 1

随着React的推出。StrictMode，我假设你已经有了你的反应应用程序，反应提供了一种通过两次调用渲染阶段生命周期来检测意外副作用的方法。

根据文件：

呈现阶段生命周期包括以下类组件方法：

- constructor
- componentWillMount (or UNSAFE_componentWillMount)
- componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
- componentWillUpdate (or UNSAFE_componentWillUpdate)
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- setState updater functions (the first argument)

然而，组件didMount不是渲染阶段生命周期，而是提交阶段生命周期，因此它只被调用一次。