Saya mencoba untuk mendapatkan pemahaman yang lebih baik tentang siklus hidup komponen React. Saya mencoba mencetak ke pesan konsol yang terkait dengan siklus hidup komponen Bereaksi. Pada komponen yang saya tampilkan di bawah ini saya menggunakan console.log sebanyak 3 kali. Namun, 2 di antaranya dicetak dua kali di konsol. Saya menggunakan chrome. Inilah yang dicetak ke konsol.

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

Mengapa pencetakan ganda dua dari tiga pesan console.log kecuali untuk componentDidMount? Apakah console.log untuk componentDidMount hanya dicetak sekali. Di bawah ini adalah bagaimana seluruh kode untuk komponen:

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;
0
larry8989 20 Mei 2020, 21:14

1 menjawab

Jawaban Terbaik

Dengan diperkenalkannya React.StrictMode yang saya asumsikan sudah Anda miliki dengan aplikasi reaksi Anda, react telah menyediakan cara untuk mendeteksi efek samping yang tidak terduga dengan menjalankan siklus hidup fase render dua kali.

Menurut ke dokumen:

Siklus hidup fase render mencakup metode komponen kelas berikut:

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

Namun componentDidMount bukan siklus hidup fase render tetapi siklus hidup fase komit dan karenanya hanya dipanggil sekali.

0
Shubham Khatri 20 Mei 2020, 18:31