除了 React 中的 componentDidMount 外，双 console.log [英] Double console.log except for componentDidMount in React

问题描述

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

Menu 组件构造函数被调用调用菜单组件构造函数调用菜单组件渲染调用菜单组件渲染菜单组件 componentDidMount 被调用

为什么除了 componentDidMount 之外，三个 console.log 消息中的两个都重复打印?Whid 只打印一次 componentDidMount 的 console.log.以下是组件的整个代码:

import React, { Component } from 'react';import { Card, CardImage, CardImgOverlay, CardText, CardBody, CardTitle, CardImg } from 'reactstrap';类菜单扩展组件{构造函数(道具){超级(道具)；this.state = {selectedDish:空}console.log('菜单组件构造函数被调用');}componentDidMount() {console.log('菜单组件 componentDidMount 被调用');}onDishSelect(dish) {this.setState({ selectedDish: 菜});}渲染盘(菜){如果(菜！=空){返回(<卡片><CardImg width="100%" src={dish.image} alt={dish.name}/><卡片体><CardTitle>{dish.name}</CardTitle><CardText>{dish.description}</CardText></CardBody></卡片>);} 别的 {返回(<div></div>);}}使成为() {const menu = this.props.dishes.map((dish) => {返回 (<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></卡片>

);});console.log('菜单组件渲染被调用');返回 (<div className="容器"><div className="row">{菜单}

<div className="row">{this.renderDish(this.state.selectedDish)}

);}}导出默认菜单；

解决方案

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

根据到文档:>

渲染阶段生命周期包括以下类组件方法:

- 构造函数- componentWillMount(或 UNSAFE_componentWillMount)- componentWillReceiveProps(或 UNSAFE_componentWillReceiveProps)- componentWillUpdate(或 UNSAFE_componentWillUpdate)- getDerivedStateFromProps- shouldComponentUpdate- 使成为- setState 更新程序函数(第一个参数)

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

I am trying to gain a better understanding of the React component life cycle. I am trying to print to the console messages related to the life cycle of React components. In the component I show below I am using console.log 3 times. However, 2 of them are printed twice in the console. I am using chrome. This is what gets printed to the console.

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

Why the double printing of two out of the three console.log messages except for the componentDidMount? Whid does the console.log for componentDidMount get printed only once. Below is how the entire code for the component:

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;

解决方案

With the introduction of React.StrictMode which I assume you would have already had with your react app, react has provided a way to detect unexpected sideeffects by invoking the render phase lifecycles twice.

According to the docs:

Render phase lifecycles include the following class component methods:

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

However componentDidMount is not a render phase lifecycle but a commit phase lifecyle and hence its only invoked once.

这篇关于除了 React 中的 componentDidMount 外，双 console.log的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！