すべての反応のコンポーネントやコンポーネントの一部から構成され、すべてのコンポーネントは、地球上の任意の生物のライフサイクルのように、特定のライフサイクルに従ってください🌎. 彼らは生まれ、成長し、やがて死ぬ.
彼らが生まれる段階はマウントと呼ばれます.彼らが成長しているときは更新と呼ばれます.最後の段階はアンマウントと呼ばれます.
この全体のプロセスはコンポーネントライフサイクルと呼ばれます.これらのフェーズのそれぞれに対して、コンポーネントの動作を制御するライフサイクルメソッドと呼ばれる、ある組み込みメソッドをレンダリングします.
コンポーネントの実装、更新、umountingに関連するすべての反応LifeCycleメソッドの下のダイアグラムで見ることができます.(図表信用:)

各ライフサイクルで利用可能な各メソッドについて、次のセクションで説明します.

実装ライフサイクル法

実装フェーズは、コンポーネントが作成され、DOMに挿入されるフェーズです.

1 .コンストラクタ()

constructor() は、コンポーネントとして呼び出される最初のメソッドです.このメソッドは2つの目的で使用されます.

コンポーネントのローカル状態を初期化するには

イベント処理メソッドをインスタンスにバインドするには

ここでの例ですconstructor() メソッドインアクション

constructor(props) {
  super(props);
  this.state = { fruit: 'Apple 🍎' }
  this.eatFruit = this.eatFruit.bind(this);
}

注意してください.constructor() コンポーネントがDOMにマウントされる前に最初に呼び出されたメソッドです.この方法で副作用を導入すべきではない.

2 . getderivedfromprops ()

getDerivedStateFromProps() の新しい反応ライフサイクル方法ですReact 17 置換するように設計されcomponentWillReceiveProps() .
この関数の目的は、状態と小道具が必要なときに同期していることを確認することです.getDerivedStateFromProps() ライフサイクルは、コンストラクタメソッドとcomponentDidMount() ライフサイクルラン.この関数はprops and state . 状態やnullを更新するためにオブジェクトを返さなければなりません.
よりよく理解するgetDerivedStateFromProps() 次のコードを参照してください

import React from 'react';

class FavFruit extends React.Component {
  constructor() {
    super(props);
    this.state = {
      favFruit: 'Banana 🍌';
    }
  }

  render() {
    return(
      <h2>My Favorite Fruit is {this.state.favFruit}</h2>
    );
  }
}

コンポーネントがマウントされると、私たちはMy Favorite Fruit is Banana 🍌 ブラウザで表示されます.どうやって我々の国家をBanana 🍌 into Apple 🍎 以前render() ? 実際に、我々はそれを介して行うことができますgetDerivedStateFromProps() .

import React from 'react';

class FavFruit extends React.Component {
  constructor() {
    super(props);
    this.state = {
      favFruit: 'Banana 🍌';
    }
  }

  // Not Recommended. For explaining purpose only.
  static getDerivedStateFromProps(props, state) {
    return {
      favFruit: 'Apple 🍎'
    }
  }

  render() {
    return(
      <h2>My Favorite Fruit is {this.state.favFruit}</h2>
    );
  }
}

コンポーネントがマウントされると、私たちはMy Favorite Fruit is Apple 🍎 ブラウザではなくブラウザで表示されますBanana 🍌 . どうやって動くの?オブジェクトを返します.getDerivedStateFromProps() そのデータを利用することができますfavFruit 以前render() メソッドを呼び出してDOMをレンダリングします.注意getDerivedStateFromProps() は2引数をとり、最初の引数はprops 番目の引数はstate .
この短い例は工夫されていて、実際に使用方法を代表していませんgetDerivedStateFromProps() . しかし、それは基本を理解するのに役立ちます.しかし、我々は経由で状態を更新できるのでgetDerivedStateFromProps() それは我々がすべきではない.使用するときに特定のユースケースがありますgetDerivedStateFromProps() . 我々が間違った文脈でそれを使うならば、我々は間違ったツールで問題を解決しています🔨.
いつ使用するかgetDerivedStateFromProps() ? 私たちはなぜこのメソッドが最初に作成されたかを知らなければなりません.支柱変更に応答して内部状態を更新する必要がある場合がある.このようにして構成されるderived state .

3 . render ()

render() メソッドはgetDerivedStateFromProps() が呼ばれる.

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <h1>Hello World! 🌎</h1>
  }
}

何を返すrender() はDOMにレンダリングされる.上の例ではJSX . しかし、我々はまたarray of JSX string , number , もし何かをレンダリングしたくないなら、私たちはboolean or null

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return [
      <div key='1'>"Hello World! 🌎"</div>,
      <div key='2'>"Hello World! 🌎"</div>]
  }
}

上の例ではkey プロパティjsx . これは、識別し、リスト内の項目の変更、更新、または削除の追跡を使用して反応によって使用されます.

コンポーネントのマウント()

アフターrender() が呼び出されます(コンポーネントはDOMにマウントされます).componentDidMount() が呼び出されます.この方法は副作用を行うときの場所です.APIへのサブスクリプションを作成するように、データの取得、または多分DOMに変更を加える.

import React from 'react';

class ChangeDocTitle extends React.Component() {
  componentDidMount() {
    document.title = 'Hello World 🌎';
  }

  render() {
    return<h1>This component will change the title of your current tab</h1>
  }
}

ライフサイクル手法の更新

更新フェーズは、コンポーネントが再レンダリング(状態を更新する)を行うフェーズですstate or prop チェンジ.

1 . getderivedfromprops ()

このメソッドは、更新時にコンポーネントが呼び出されます.既に説明しているのでgetDerivedFromProps() マウントフェーズに関しては🤓. 注意getDerivedFromProps() コンポーネントがマウントされ、コンポーネントが再描画を行うときに呼び出されます.

2 ) syldcomponentコンポーネント()

アフターgetDerivedProps() が呼び出されます.shouldComponentUpdate() が呼び出される.このメソッドは2つの引数を受け取りますnextProps 番目の引数はnextState .
この関数の目的は、コンポーネントを返すことによってコンポーネントが再描画されることを確認することですtrue を返します.false .

import React from 'react';

class FavFood extends Component {
  constructor(props) {
    super(props);
    this.state = {
      favMeal: 'French Fries 🍟'
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    // let's assume that the currentProps in this example { favDrink: 'Cola 🥤' }
    if (nextProps.favDrink == 'Cola 🥤') {
      // The component is won't be updated if the currentProps.favDrink is still same with the nextProps.favDrink even when the nextState is different with currentState
      return false;
    } else {
      return true;
    }
  }

  render() {
    return (
      <div>
        <h1>My Fav Drink is: {this.props.favDrink}</h1>
        <h1>My Fav Meal is: {this.state.favMeal}</h1>
        <button onClick={() => {this.setState({favMeal: 'Burger 🍔'})}}>Change My Meal! 🍽</button>
      </div>
    );
  }
}

上の工夫された例では、クリックすることができますChange My Meal! 🍽 状態を変えるfavMeal でもshouldComponentUpdate() 我々は、コンディショニングを行うnextProps of favDrink まだCola 🥤 と同じcurrentProps ) その後、コンポーネントは更新されません.shouldComponentUpdate() は強力な方法です.しかし、ことわざとして、「大国が大きな責任を持つ」と言うように、我々は注意してこの方法を扱わなければなりません.我々が我々の条件付けに注意しなかったならば、そして、誤って帰りますfalse , コンポーネントは更新されません、そして、これは問題でありえます、そして、それはデバッグするのが難しいでしょう🐞.

3 . render ()

render() メソッドは、shouldComponentUpdate() , デフォルトはtrue .

getsnapshotbefore update ()

一度render() が呼び出されます.getSnapshotBeforeUpdate() はDOMがレンダリングされる直前に呼び出されます.DOMが更新された後の状態の前の値を格納するのに使用されます.返り値getSnapshotBeforeUpdate() はcomponentDidUpdate() これについては後述する.getSnapshotBeforeUpdate() つの引数を受け入れるprevProps and prevState .

import React from 'react';

class FavSuperHero extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mySuperHero: 'Thor ⚡️' }
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ mySuperHero: 'IronMan 🚀' })
    }, 1000)
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById('prevHero').innerHTML = `Previous Super Hero: ${prevState.mySuperHero}`
  }

  componentDidUpdate() {
    document.getElementById('newHero').innerHTML = `New Super Hero: ${prevState.mySuperHero}`
  }

  render() {
    return(
      <div>
        <h1 id='prevHero'></h1>
        <h1 id='newHero'></h1>
      </div>
    );
  }
}

上のコードからprevState 表示Previous Super Hero: Thor ⚡️ これは更新された古い州ですNew Super Hero: IronMan 🚀 これが現在の状態です.
注意してください、それは非常に直接の状態を設定することをお勧めしますgetSnapshotBeforeUpdate() , そうでなければトリガされるrender() メソッド.

コンポーネントdidupdate ()

componentDidUpdate() はrender() メソッドが呼び出されました.の共通ユースケースcomponentDidUpdate() 方法は、prop or state 変更点このメソッドは3つの引数を受け取りますprevProps , 二番目はprevState , と三番目の引き数はgetSnapshotBeforeUpdate() メソッド.
また、コールすることができますsetState() このメソッドの中で.ただし、この状態でsetstateの不正な使い方に注意してくださいcomponentDidUpdate() 無限ループを引き起こす可能性があります.あなたがラップする必要があることに注意してくださいsetState() 状態またはプロップの変更を前の状態からチェックする条件で.

componentDidUpdate(prevProps) {
  if (this.props.accessToken !== null && prevProps.accessToken !== null) {
    this.getUser(accessToken)
    .then(user => {
      if (user) {
        this.setState(user);
      }
    })
    .catch(e => console.log('Error fetching user data'))
  }
}

上の例では、もしaccessToken がnull , ユーザーデータを取得し、ユーザー状態を更新できます.アクセストークンがない場合、componentDidUpdate() は呼び出さないgetUser() したがって、user 状態.

アンロード型ライフサイクル法

アンマウントフェーズは、DOMからコンポーネントがアンマウント(破壊)されるフェーズです.

コンポーネントを取得します。

このメソッドは、DOM💣. これは、任意のクリーンアップメソッドを実行し、ネットワーク要求をキャンセルしたり、componentDidMount() メソッド.

import React from 'react';

class Building extends React.Component {
  componentWillUnmount() {
    console.log('The building is destroyed 💥');
  }

  render() {
    return <h1>My Building 🏢</h1>;
  }
}

class DestroyBuilding extends React.Component {
  constructor(props) {
    super(props);
    state = {
      showBuilding: true
    };
  }

  render() {
    let building;
    if (this.state.showBuilding) {
      building = <Building />
    };

    return(
      <div>
        {building}
        <button onClick={() => this.setState(showBuilding: false)}>Detonate Building 💣</button>
      </div>
    );
  }
}

クリックするときDetonate Building 💣 ボタン'The building is destroyed 💥' テキストはコンソールに記録されます.