React Native コンポーネントのライフサイクルは何ですか?

今回は、React Native コンポーネントのライフサイクルはどれくらいなのか、React Native コンポーネントのライフサイクルの注意点は何なのかについて実際の事例を交えてご紹介します。

ここでは、React Native コンポーネントのライフサイクルについて説明します。これは、React Native コンポーネントを使用する際に非常に役立つと思います。興味のある方はぜひご覧ください。

Android 開発における View と同様に、React Native (RN) のコンポーネントにもライフサイクルがあります。いわゆるライフ サイクルは、オブジェクトが最初に作成されてから最終的に消滅するまでに通過する状態です。ライフ サイクルを理解することが合理的な開発の鍵となります。 RN コンポーネントのライフサイクルは次のように構成されます

図に示すように、コンポーネントのライフサイクルは大きく 3 つの段階に分けることができます:

• 最初のステージ: 図の上部の点線のボックスに示されているように、コンポーネントの最初の描画ステージであり、コンポーネントの読み込みと初期化が完了します

• 第 2 ステージ: の実行および対話ステージです。図に示すコンポーネント。左下隅の点線のボックス。この段階では、コンポーネントはユーザー操作を処理したり、インターフェースを更新するためのイベントを受信したりできます。

• 3 番目の段階:画像の右下隅にある点線のボックスで、コンポーネントがアンロードされ、破棄されます。ここでいくつかのコンポーネントがクリーンアップされます。

ライフサイクル

コールバック関数

次に、ライフサイクルの各コールバック関数を詳しく紹介します。

getDefaultProps

コンポーネントが作成される前に、 getDefaultProps() が最初に呼び出されます。これは、厳密に言えば、コンポーネントのライフサイクルの一部ではありません。コンポーネントが作成されてロードされると、まず getInitialState() が呼び出され、コンポーネントの状態が初期化されます。

コンポーネントウィルマウント

次に、コンポーネントをロードする準備をするために、componentWillMount() が呼び出されます。そのプロトタイプは次のとおりです:

void componentWillMount()

この関数は、コンポーネントが作成され、状態が初期化された後、render() が初めて描画される前に呼び出されます。ここでいくつかのビジネス初期化操作を実行でき、コンポーネントのステータスを設定することもできます。この関数は、ライフサイクル全体で 1 回だけ呼び出されます。

コンポーネントDidMount

コンポーネントが初めて描画された後、componentDidMount() が呼び出され、コンポーネントがロードされたことが通知されます。関数のプロトタイプは次のとおりです:

void componentDidMount()

この関数が呼び出されると、その仮想 DOM が構築され、この関数でその要素またはサブコンポーネントの取得を開始できるようになります。 RN フレームワークは最初に子コンポーネントのcomponentDidMount()を呼び出し、次に親コンポーネントの関数を呼び出すことに注意してください。この関数から開始して、setTimeout または setInterval のタイミングの設定やネットワーク リクエストの開始など、他の JS フレームワークと対話できます。この関数も一度だけ呼び出されます。この関数の後、安定した実行状態に入り、イベントがトリガーされるのを待ちます。

コンポーネントWillReceiveProps

コンポーネントが新しいプロパティ (props) を受け取ると、componentWillReceiveProps() が呼び出されます。そのプロトタイプは次のとおりです:

void componentWillReceiveProps( 
 object nextProps
)

入力パラメーター nextProps は設定されるプロパティであり、古いプロパティは引き続き this.props を通じて取得できます。このコールバック関数では、プロパティの変更に基づいて this.setState() を呼び出すことでコンポーネントの状態を更新できます。ここでの更新状態の呼び出しは

安全であり、追加の render() 呼び出しはトリガーされません。以下の通り: rreee

shouldコンポーネント更新

コンポーネントが新しい属性を受け取り、状態が変化すると、 shouldComponentUpdate(...) の呼び出しがトリガーされます。関数のプロトタイプは次のとおりです:

componentWillReceiveProps: function(nextProps) { 
 this.setState({
  likesIncreasing: nextProps.likeCount > this.props.likeCount
 });
}

入力パラメーター nextProps は、上記のcomponentWillReceiveProps 関数と同じです。 nextState は、コンポーネントが更新しようとしている状態値を表します。この

関数 の戻り値は、コンポーネントを更新する必要があるかどうかを判断し、true の場合は更新が必要であることを意味し、後続の更新プロセスを続行します。それ以外の場合は更新されず、そのまま待機状態になります。

デフォルトでは、この関数は常に true を返し、データが変更されたときに UI を同期的に更新できるようにします。大規模なプロジェクトでは、この関数を自分でオーバーロードし、変更前後のプロパティとステータスをチェックして UI を更新する必要があるかどうかを判断できます。これにより、アプリケーションのパフォーマンスを効果的に向上させることができます。

componentWillUpdate

如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()，其函数原型如下：

void componentWillUpdate( 
 object nextProps, object nextState
)

输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。

componentDidUpdate

调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来得到通知，其函数原型如下：

void componentDidUpdate( 
 object prevProps, object prevState
)

因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了 prevProps 和 prevState。

componentWillUnmount

当组件要被从界面上移除的时候，就会调用 componentWillUnmount()，其函数原型如下：

void componentWillUnmount()

在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。

总结

到这里，RN 的组件的完整的生命都介绍完了，在回头来看一下前面的图，就比较清晰了，把生命周期的回调函数总结成如下表格：

生命周期	调用次数	能否使用 setSate()
getDefaultProps	1(全局调用一次)	否
getInitialState	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	否
componentDidUpdate	>=0	否
componentWillUnmount	1	否

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

以上がReact Native コンポーネントのライフサイクルは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。