Reactコンポーネントのライフサイクル機能についての簡単な説明

React コンポーネントのライフサイクル機能とは何ですか?ライフサイクル関数は、ES6 構文クラスや create-react-class モジュールなどのクラス コンポーネントでのみ使用できます。

マウント、更新、アンインストール、エラー処理といういくつかの段階に分かれています。

1. マウント:コンストラクター (よく使用される)、static getDerivedStateFromProps、render (よく使用される)、componentDidMount (よく使用される)

コンストラクターは、クラス コンポーネントのコンストラクターです。ここでは、コンポーネントの状態を初期化したり、メソッドをバインドしたりできます (例:constructor(props){ super(props);this.state={test: 'test'};this.someFn = this.someFn.bind(this);})。それ以外の場合は、コンストラクター メソッドを明示的に実装する必要はありません。

static getDerivedStateFromProps: レンダリング前に呼び出され、次のような値を返すことで状態を変更できます。

静的 getDerivedStateFromProps(nextProps, prevState){
 
    props.test !== state.test の場合{
        return {state: props.state}; //返される部分はpartialStateと呼ばれます
//これは新しい状態の一部となり、nextState は _assign({}, prevState, partialState); になります。
    }
 
    null を返します。 
// null または undefined が返された場合、 nextState は prevState になり、コンポーネントの状態は変更されません。

その唯一の目的は、props が変更されたときにコンポーネントの状態を更新できるようにすることであり、状態の値は props に依存します。理由が何であれ、または shouldComponentUpdate がコンポーネントで false を返す場合でも、レンダリング前に実行されます。

static getDerivedStateFromProps に似たライフサイクルは、componentWillReceiveProps(nextProps) です。ここでは、this.setState({...}); を呼び出して状態を変更します。static getDerivedStateFromProps と componentWillReceiveProps を使用する場合は注意し、パフォーマンスを考慮し、バグを回避してください。必要に応じて、React.PureComponent や React.memo などの完全に制御可能なコンポーネントを検討するか、主要な制御不可能なコンポーネントを使用して、上記の getDerivedStateFromProps と componentWillReceiveProps を置き換えてください。

親コンポーネントが再レンダリングされるときにトリガーされる UNSAFE_componentWillReceiveProps もあります。

Render は、React 要素を返すレンダリング関数です。これは、クラス コンポーネントが実装する必要があるメソッドです。これは、React 要素を返すだけで、インターフェイスと直接やり取りしない純粋な関数です。やり取りは通常、ComponentDidMount や ComponentDidUpdate などのサイクル内に配置されます。render メソッドの戻り値の型は、次のようになります。

// '<div/>' や '<MyComponent/>' などの React 要素になります 
//またはReact.createElement(type, ?props, ?children)で作成された要素、
//配列にすることもできます（配列は this.props.children ['Test', ['nest test'], ...others] の形式に似ています）
//またはフラグメント、
//文字列または数値型（文字列として扱われる）にすることができます。
// ブール型または null にすることができます (ブール型または null の場合、何もレンダリングされません)。
クラスTestはReact.Componentを拡張します。
    与える（）{
        // 'Hello Test' を返します。
        //true を返します。
        // ['Hello', ' Test'] を返します。
        //<div>テスト</div> を返す
        // <MyComponent>Test</MyComponent> を返す
        null を返します。
    }
}

componentDidMountは、コンポーネントが React コンポーネント ツリーにマウントされた後に呼び出されます。ここでは、非同期データを取得したり、DOM ノードの初期化に依存したりすることができ、この時点でサブスクリプションを追加するのにも適しています (componentWillUnmount の場合はサブスクリプションを解除することを忘れないでください)。ここで setState を呼び出すと、追加のレンダリングがトリガーされますが、これはブラウザーが画面を更新する前に行われるため、render が 2 回呼び出されても、ユーザーは中間状態を見ることができません。

2. 更新: static getDerivedStateFromProps、shouldComponentUpdate、render (よく使用される)、getSnapshotBeforeUpdate、componentDidUpdate (よく使用される)

shouldComponentUpdate: ReactComponent を継承するコンポーネントで使用できますが、React.PureComponent を継承するコンポーネントでは使用できません。コンポーネントを更新するには true を返します。そうでない場合、shouldComponentUpdate が false を返すと、render メソッドは呼び出されず、componentDidUpdate は呼び出されません。shouldComponentUpdate(nextProps, nextState){} は、this.props と nextProps、this.state と nextState を手動で比較できます。ただし、false を返すと、状態が更新されたときに子コンポーネントが再レンダリングされるのを防ぐことはできません。子コンポーネントが更新されても、親コンポーネントが更新されていないため、新しい props は取得されません。

getSnapshotBeforeUpdate: 最後のレンダリング出力 (DOM ノードに送信) の前に呼び出され、要素が DOM に送信される前に現在の DOM 情報 (現在の DOM スクロール位置など) を収集し、その後、componentDidUpdate サイクル メソッドに渡されるように戻ります (このメソッドは要素が DOM に送信された後に呼び出されるため、この時点で取得された DOM 情報が更新されます)。

componentDidUpdate : componentDidUpdate(prevProps, prevState, snapshot){}; コンポーネントが更新された後に呼び出され、ここで DOM を操作したり、前後の props を比較したり、状態を使用して非同期にデータを要求したりすることができます。3 番目のパラメーターは、コンポーネントのライフサイクル getSnapshotBeforeUpdate の戻り値です。getSnapshotBeforeUpdate が定義されていない場合、componentDidUpdate の 3 番目のパラメーターは未定義になります。

3. アンマウント: componentWillUnmount (よく使われる)

componentWillUnmount: このサイクル メソッドは、コンポーネントがアンインストールされて破棄される前に呼び出されます。タイマーをクリアしたり、ネットワーク要求をキャンセルしたり、サブスクリプションをキャンセルしたりして、メモリを解放できます。

4、静的 getDerivedStateFromError、componentDidCatch;

静的 getDerivedStateFromError:

コンポーネントがキャッチした内容:

参照ドキュメント

Reactコンポーネント

React Component ライフサイクル機能に関するこの記事はこれで終わりです。React Component ライフサイクルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。