要素の小道具でコールバックを呼び出すことについて少し混乱しています。
ここにボタンがあるとしましょう。
<Button
onPress={() => { loadMore()}}
title="Load More"
backgroundColor='#0A55C4' />
違いは何ですか:
onPress={() => { this.loadMore()}}
onPress={this.loadMore()}
onPress={this.loadMore}
それらはすべてうまく機能しているようです。しかし、私はそれらの間に違いがあるのだろうか?ありがとう
onPress = {this.loadMore()}
これは間違いである可能性が非常に高いです。これは、「すぐにloadMoreを呼び出し、その結果を小道具としてコンポーネントに渡す」ことを意味します。loadMoreが他の関数を生成するファクトリでない限り、おそらくこれを実行したくないでしょう。
onPress = {this.loadMore}
これは、「コンポーネントにより多くの負荷を渡す」ことを意味します。多くの場合、これは必要なことですが、loadMoreが呼び出されると、this
それを修正するための手順を実行しない限り、未定義になります。たとえば、コンストラクターで関数をバインドしたり、矢印関数として作成したりできます。
onPress = {()=> {this.loadMore()}}
これは、「新しい関数を作成し、それをコンポーネントに渡す」ことを意味します。これは、前のケースで述べた問題に対する可能な解決策の1つです。
レンダリングが呼び出されるたびに新しい関数を作成するという欠点があります。関数の作成自体はかなり軽量ですが、Buttonコンポーネントが古いonPressプロップと新しいonPressプロップを比較し、それらが変更されたことを確認して、再レンダリングする必要があると考える可能性があることを意味します。この追加の再レンダリングは、パフォーマンスの考慮事項になる可能性があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加