⏳ LifeCycle

では、Component Reactのライフサイクル方法を見てみましょう.簡単に言えば
componentはDom上で描画および削除できるストリームで実行できる関数です.
考えてみればよかった
正式な書類
私も下記の公式文書を参考に勉強しました.
https://ko.reactjs.org/docs/react-component.html#static-getderivedstatefromprops
表示しやすいライフサイクルチャート
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
この記事では、正式なドキュメントでよく使われるようにマークする方法についてのみ説明します.

🎈 構成部品の作成時

🎐 constructor(props)

コンストラクション関数は、最初に実行される方法です.コンストラクション関数内部でsuper(props)を呼び出す
それをしなければならない.イベントを処理するためのstateまたはバインド関数の初期化
私はあなたを助けることができます.

   constructor(props){
        super(props) 
        
        this.state = {bgColor:"skyblue"}   
        this.colorChange = this.colorChange.bind(this);
    }
    

🎐 render()

render()は、エレメントレベルの反応で呼び出さなければならない関数です.これにより、
更新します.

🎐 componentDidMount()

コンポーネントDidMount()は、レンダリングの実行後に呼び出されます.
Domを描画した後に初期化する必要がある操作をここで行います.
ネットワーク要求を送信する適切な場所.
これまで3つのライフサイクルを学び、コンポーネントを作成するときに、
確認してみます.

import React, { Component, Fragment } from 'react'

export default class Test extends Component {
    constructor(props){
        super(props) 

        console.log("constructor()") 1️⃣
    }
    
    componentDidMount(){
        console.log("componentDidMount()") 3️⃣
    }
    render() {
        console.log("render()") 2️⃣
        return (
            <div className={"test"}>
                <span>{this.props.name}</span>  
            </div>
        )
    }
}

🎐 Result

前述したように、コンストラクション関数()の実行後render()の実行、render()の実行後
ComponentDidMount()が実行されていることがわかります.

🎈 構成部品の更新時

今回、構成部品の作成後にpropsまたはstateが変化すると、ライフサイクルが実行されます.
ちょっとお尋ねします.
一般的な更新方法についてのみ説明します.詳細については、
公式文書を参照してください

🎐 componentDidUpdate()

更新が完了すると、コンポーネントDidMountではなくrender()が実行されます.
ComponentDidUpdate()を実行します.
コンポーネントDidUpdate(PrevProps、PrevState、snapshot).
この方法では、構成部品の更新時にドメイン操作を行うことをお勧めします.
prevProps、prevStateは、変更前にPropsとStateの値を持ちます.
これにより、現在のprops、stateと比較できます.
作成から->更新までのライフサイクルをテストします.

import React, { Component, Fragment } from 'react'

export default class Hello extends Component {
    constructor(props){
        super(props) 

        this.colorChange = this.colorChange.bind(this);
        this.state = {bgColor:"skyblue"}
        console.log("constructor()")			1️⃣
    }
    
    componentDidMount(){
        console.log("componentDidMount()")		3️⃣
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("componentDidUpdate()")		6️⃣
        
    }

    colorChange(){
        console.log("colorChange()")			4️⃣
        this.setState({bgColor:"green"})
    }
    render() {
        console.log("render()")					2️⃣ 5️⃣
        return (
            <Fragment>
                <div className={"color_box"} style={{backgroundColor:this.state.bgColor}}>
                    <span>Hello {this.props.name}</span>  
                </div>
                <button onClick={this.colorChange}>color Change</button>
            </Fragment>
        )
    }
}

🎐 Result

結果から,DidMountは前の結果と同じであり,colorChange関数により
this.state.カラーを変更しました.結果はrenderを再実行します.
コンポーネントDidUpdate()が実行されていることがわかります.

🎈Domから構成部品を除去する場合

🎐 componentWillUnmount()

デバイスがDOMから消えてから動作する方法
コンポーネントWillUnmount()は、構成部品をアンインストールする前に呼び出されます.
タイマーの削除、ネットワークリクエストのキャンセル、コンポーネントDidMount()内で作成したサブスクリプションのキャンセル.
タスクを実行します.
私たちはcomponentWillUnmount(
提供するメソッドで必要なメソッドのみを使用する正式なドキュメントを参照してください.