2016-01-09 6 views
6

setStateを呼び出すことによってコンポーネントが更新された場合、DOMツリー全体、または更新されたコンポーネントに属している部分でのみ、反復アルゴリズムを実行しますか?Reactは常にツリー全体をチェックしますか?

たとえば、アプリケーションに10000個のコンポーネントがあり、子供がいないコンポーネント(つまりツリーの葉)のsetStateを呼び出すと、Reactは大規模なDOMツリー全体を遅くするコンポーネントによって生成されたDOMツリーのみ(これははるかに高速でしょう)?

答えて

4

いいえ、リーフノードでのみsetStateを呼び出したとき、Reactはツリー全体を通過しません。

setStateを呼び出すと、reactはsetStateが呼び出されたコンポーネント(ツリーノード)と子であるコンポーネント(ノード)のみを再描画します。 Reactは、実際にsetStateの呼び出しから表現される変更がある場合にのみDOMを更新することに注意してください。

Reactチームのメンバーの1人であるVjeuxは、反応差分アルゴリズムの仕組みや、setStateの呼び出し時の動作について詳しく説明する良いブログ記事を投稿しました。ここにはlinkがあります。

+0

コンポーネントでsetStateを呼び出すと、すべてのサブツリーコンポーネントが再描画されることを理解することが重要です。このパフォーマンスの影響を避けるには、 'boolean shouldComponentUpdate(object nextProps、object nextState)'をインテリジェントに使用する必要があります。 –

+0

これは良い点です。ツリー内で上位に呼び出すと、setStateは大きな効果を持つことができることを理解することが重要ですその状態を小道具を介して複数のレベルに渡すことです。私は、あなたが上で詳述したshouldComponentUpdateを使用する戦略を説明するこの[高度なパフォーマンスリンク](https://facebook.github.io/react/docs/advanced-performance.html)が好きです。 –

+0

また、高度なトピックではありますが、[不変のデータ構造](https://facebook.github.io/immutable-js/)を使って小道具として渡すと、特にshouldComponentUpdate方法。 –

関連する問題