2017-06-27 17 views
0

イメージングツリーの定義を含むJSオブジェクトがあります。ReactJSのツリー全体を再レンダリングせずにツリーコンポーネントのリーフコンポーネントをレンダリングする方法

{title:'leaf A'} 

ツリーJSオブジェクトは、次のようになります:のような葉の定義は見え

{{title:'leaf A', children:{title:'children of leaf A'}}} 

ツリーコンポーネントがレンダリングされ、いくつかのイベントが焼成したとき、私は葉のコンポーネントのタイトルを変更したいです葉の成分。これは、ツリーコンポーネントのイベントハンドラをリーフコンポーネントにフックし、setState()を使用してツリーコンポーネントを再レンダリングすることで簡単に行うことができます。しかし、そのような変更はツリーの構造変更を引き起こさないので、ツリー全体を再レンダリングするのではなく、代わりにリーフコンポーネントを再レンダリングする方が良いでしょう。これをreactjsで達成することは可能ですか?その結果、ツリー描画に使用されるJSオブジェクトの葉のタイトルも変更/置換する必要があります。

+0

あなたの作品をどのように反応するか理解していないようです。仮想DOMを使用するので、実際に変更された部分だけが再レンダリングされます。 – hindmost

+0

@hindmostあなたは自分が何が起こっているのか理解していないように見えるときに人々を呼び出すことは賢明ではないと思います。あなたが望むかどうかにかかわらず、反復コンポーネントは、その小道具/状態が変わるたびに再レンダリングされます。時には、特定の小道具が変更されたときに再レンダリングしたくない場合もあります(たとえば、新しいインスタンスを持つ関数)。また、私は、仮想DOMという用語の使用をやめることをお勧めします。 – Foxhoundn

答えて

1

新しい小道具と新しい状態を受け入れるshouldComponentUpdateメソッドを使用して、再レンダリングするかどうかを決めることができます。

​​

は私が再構成ユーティリティベルトから高次成分のonlyUpdateForKeysをお調べします - https://github.com/acdlite/recompose

+0

ありがとうございました。これは反応文書でも言及されている唯一の方法です。私は最終的に私はそれが1のために最適化しないことを決めました。最適化するには時期尚早でしたが、これまでツリー上に多くの葉がないのでOKです。 2.リーフは、タイトルが変更された別のコンポーネントのラッパーであり、リーフ内のコンポーネントが異なるため、shouldComponentUpdate()メソッドの異なるロジックを必要とします。さらに、リーフは、とにかく再レンダリングされ、この最適化の恩恵を受けるでしょう。 – r00tdev

+0

より良いものが出る前にこれを答えとしてマークします – r00tdev

関連する問題