web-dev-qa-db-ja.com

ライフサイクルメソッドの理解

私はReact.jsの初心者であり、Reactライフサイクルメソッドのいくつかのメソッドを理解しようと懸命に努力しています。

これまでのところ、私を混乱させるものがあります。

1）

私の知る限り、componentWillUpdateとcomponentWillReceivePropsの違いは、親が小道具を変更するとcomponentWillReceivePropsが呼び出され、setState（componentWillReceiveProps内のこの子のsetState）を使用できることです。

例： react-table-sorter-demo

var App = React.createClass({
  getInitialState: function() {
    return {source: {limit: "200", source: "source1"}};
  },
  handleSourceChange: function(source) {
    this.setState({source: source});
  },
  render: function() {
    return (
      <div>
        <DataSourceSelectors onSourceChange={this.handleSourceChange} source={this.state.source} />
        <TableSorter dataSource={urlForDataSource(this.state.source)} config={CONFIG} headerRepeat="5" />
      </div>
    );
  }
});

TableSorterには、

componentWillReceiveProps: function(nextProps) {
    // Load new data when the dataSource property changes.
    if (nextProps.dataSource != this.props.dataSource) {
      this.loadData(nextProps.dataSource);
    }
  }

つまり、this.state.sourceを変更すると、TableSorterでcomponentWillReceivePropsが呼び出されることを期待します。

ただし、この場合のcomponentWillUpdateの使用方法はよくわかりません。componentWillUpdateの定義は

componentWillUpdate(object nextProps, object nextState)

NextStateを親から子にどのように渡すことができますか？それとも間違っているかもしれませんが、nextStateは親要素から渡されていますか？

2）メソッドcomponentWillMountは私を混乱させます。なぜなら公式文書では、

最初のレンダリングが発生する直前に、クライアントとサーバーの両方で1回呼び出されます。

この場合、このメソッドでsetStateを使用すると、最初に1回だけ呼び出されるため、getInitialStateをオーバーライドします。この場合、getInitialStateメソッドでパラメーターを設定する理由は何ですか。この特定のケースでは、次のものがあります。

  getInitialState: function() {
    return {
      items: this.props.initialItems || [],
      sort: this.props.config.sort || { column: "", order: "" },
      columns: this.props.config.columns
    };
  },
  componentWillMount: function() {
    this.loadData(this.props.dataSource);
  },
  loadData: function(dataSource) {
    if (!dataSource) return;

    $.get(dataSource).done(function(data) {
      console.log("Received data");
     this.setState({items: data});
     }.bind(this)).fail(function(error, a, b) {
      console.log("Error loading JSON");
     });
  },

項目は最初にオーバーライドされますが、なぜgetInitialStateメソッドにitems: this.props.initialItems || []が必要なのですか？

あなたが私の説明を理解できることを望み、もしあれば、私にいくつかのヒントを与えてください。

javascriptreactjslifecycle
52
Guifan Li

1）Reactの更新ライフサイクルでcomponentWillReceivePropsがcomponentWillUpdateの前に呼び出されます。 componentWillReceivePropsでsetStateを呼び出すことができます。一方、componentWillUpdateは、状態の変化に対応する必要があるときに使用するコールバックです。

小道具と状態の根本的な違いは、状態がコンポーネントに対してプライベートであることです。そのため、親コンポーネントも他の誰もコンポーネントの状態を操作することはできません（たとえば、setStateを呼び出す）。したがって、親子コンポーネント関係のデフォルトのワークフローは次のようになります。

  • 親が子に新しい小道具を渡す
  • 子は「componentWillReceiveProps」で新しい小道具を処理し、必要に応じてsetStateを呼び出します
  • 子は「componentWillUpdate」で新しい状態を処理しますが、コンポーネントがステートフルであれば、「componentWillReceiveProps」で小道具を処理するだけで十分です。

2）違いを説明するための非常に良いコード例を提供しました。 getInitialStateで設定されたデフォルト値は、初期レンダリングに使用されます。 loadDataからのcomponentWillMount呼び出しは、AJAXリクエストを開始しますが、成功する場合もしない場合もあります。さらに、完了するまでにかかる時間は不明です。 AJAXリクエストが完了し、setStateが新しい状態で呼び出されるまでに、コンポーネントはデフォルト値でDOMにレンダリングされます。 getInitialStateでデフォルトの状態を提供するのが理にかなっているのはそのためです。

注： Reactコンポーネントライフサイクルの理解 の記事は、Reactのライフサイクルメソッドを理解するための大きな助けになりました。

62
Yevgen Safronov

Reactコンポーネントの4つのフェーズ

初期化

マウント

更新

アンマウント

以下に、さまざまな方法の簡単なウォークスルーを示します。

ライフサイクル

コンポーネントの。反応するコードを作成するには、ライフサイクルメソッドを十分に理解している必要があります。

実装フェーズの方法：

コンポーネントのインスタンスが作成され、DOMにレンダリングされるときに開始されます。

1 .constructor(props)-コンポーネントが最初に初期化されるときに呼び出されます。このメソッドは一度だけ呼び出されます。
2 .componentWillMount()-コンポーネントがマウントされるときに呼び出されます。
3 .render()-コンポーネントがレンダリングされるときに呼び出されます。
4 .componentDidMount()-コンポーネントのマウントが完了すると呼び出されます。

更新フェーズの方法：

コンポーネントのプロパティまたは状態が変化すると開始します。

1 .componentWillReceiveProps(nextProps)-コンポーネントが更新され、新しい小道具を受け取ったときに呼び出されます。
2 .shouldComponentUpdate(nextProps, nextState)-小道具を受け取った後に呼び出され、更新しようとしています。このメソッドがfalseを返す場合、componentWillUpdate（）、render（）、およびcomponentDidUpdate（）は実行されません。
3 .componentWillUpdate(nextProps, nextState)-コンポーネントが更新されるときに呼び出されます。
4 .render()-コンポーネントが再レンダリングされるときに呼び出されます。
5 .componentDidUpdate(prevProps, prevState)-コンポーネントの更新が完了すると呼び出されます。

アンマウントフェーズの方法：

コンポーネントがDOMから削除されるときに開始します。

1 .componentWillUnmount()-コンポーネントがアンマウントされる直前に呼び出されます。

参照： https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c

3
Aftab22

Reactコンポーネントのライフサイクルを理解するためにこれまで読んだ中で最高の記事：

Reactコンポーネントのライフサイクルを理解する

3
Himanshu Teotia

Reactライフサイクルメソッドの驚くべき図を示します（ Dan Abramov製 ） enter image description here

この図の対話型バージョン

3
Igor Alemasow

コンポーネントライフサイクルメソッドは、クラスベースのコンポーネント内でオプションで定義できる関数です。これらのメソッドを実装する場合、コンポーネントのライフサイクル中の特定の時点で、Reactによって自動的に呼び出されます。

コンポーネントが作成され、DOMまたはブラウザに表示されます。コンポーネントを再レンダリングし、理論的にはある時点でコンポーネントがDOMから完全に削除されるthis.setState()などの処理を実行できます。その内容を画面に表示しないようにします。

その一連のイベント全体が、コンポーネントのライフサイクルと呼ばれるものです。

これらのライフサイクルメソッドは、ライフサイクル中の非常に明確なときに呼び出されます。

constructor(props)関数があります。これは、オプションで定義できる関数です。定義した場合、コンポーネントの新しいインスタンスが作成されると自動的に呼び出されます。

render()メソッドがありますが、これはオプションではなく、定義する必要があります。 render()メソッドはライフサイクル関数であり、コンポーネントのライフサイクル中のある時点で呼び出されます。

constructor(props)が呼び出されてから開始すると、render()メソッドが呼び出され、一定量のjsxが返され、コンテンツが画面に表示されます。

その後、別の一連のライフサイクルメソッドがさまざまな時点で呼び出されます。

まず、ブラウザの画面にコンポーネントが表示された直後に、componentDidMount()というライフサイクルメソッドが呼び出されます。つまり、クラス内、constructor(props)の外側、render()メソッドのすぐ上で関数を定義する場合、componentDidMount()というメソッドを次のように定義できます。

componentDidMount() {

}

render() {

}

この関数は、コンポーネントが最初に画面にレンダリングされるときに1回自動的に呼び出されます。コンポーネントを最初に表示するときに、セットアップのためのコードを入れたり、初期データのロードや、一度だけ実行したいさまざまな操作を実行したりできます。

そのメソッドが呼び出されると、コンポーネントは座って更新を待ちます。更新はthis.setState()の形式で提供されます。

完了すると、コンポーネントは更新または再レンダリングされ、componentDidUpdate()という別のライフサイクルメソッドが呼び出されます。その関数を定義すると、そのコンポーネントが更新されるたびに自動的に呼び出されます。

コンポーネントは残り、別の更新とcomponentDidUpdate()が再び待機するか、多数の時間を待機します。

ある時点で、componentDidUpdate()コンポーネントとcomponentWillUnmount()を実装するthatを停止したい場合があります。これは、コンポーネントのクリーンアップを行うときに呼び出すメソッドです。

0
Daniel