2017-12-11 22 views
0

私はreact-router-reduxを使用しており、connect()コンポーネントをネストしています。状態が変わったときに、入れ子になったコンポーネントが再レンダリングされていることを除いて、これはうまくいくようです。コンポーネントの再レンダリングを停止する方法(React-redux)

Probs: ルートに5人の子供がある: すべてのコンポーネントが接続されているため、いずれかの子供に状態の変更があると、すべてのコンポーネントが再レンダリングされます。

どのようにして必要な子のみをレンダリングできますか?

(解決のために、このちゃったごめんなさいをconnectAdvancedライフ・サイクル・メソッドを使用する方法はありますか?

+2

shouldComponentUpdateを使用すると、コンポーネントを再レンダリングする際に制御することができます(返却に応じて、trueまたはfalse):https://reactjs.org/docs/react-component.html#shouldcomponentupdate。 – Rodius

+0

この場合、React.PureComponent/react-update-if-changedを使用して、再レンダリングの問題を軽減しますか?私は世界に反応するために新しいです。この問題を解決するには、あなたの意見と提案を共有してください。 –

答えて

1

あなたはshouldComponentUpdateライフサイクルを使用する必要があります親コンポーネントで、あなたの状態が変化するたびに再レンダリングされてから、ネストされた子供たちを防ぐために。

shouldComponentUpdateは2つのパラメータ

だからどこでも、あなたはfalseを返す必要がありますレンダリングを再停止したいshouldComponentUpdate(nextProps, nextState)になります。ドキュメントを1として「再レンダリング時にそれらの状態の変化から、子コンポーネントを防ぐことはできませんfalseを返す。」

ShouldComponentUpdate Docs

+0

ShouldComponentUpdateで私はモデルオブジェクトをループし、値をチェックしなければなりません。大規模なストアと頻繁な更新でreduxのパフォーマンスを考慮すると、probsを解決するのに役立たないでしょう。 –

+0

あなたは '' '非常に大きなオブジェクト' ''の特定のkey:valueペアが変更されたときに更新するだけです。それぞれのオブジェクトをチェックする必要はありません。これは、使用できる唯一のソリューションです。他のアプローチがあれば、私はそれを述べていたでしょう。 –

+0

ありがとうございます。問題は私は/システムがどのキー:値のペアが変更されているので、サービスはオブジェクト(私たちのためのブラックボックス)を更新するオブジェクトを世話するので、私たちはUIペインティングのモデルオブジェクトを送出している。ここで私は再演奏の部分を決定したい。 [注:オブジェクトの形状は固定されており、頻繁に値が変化しているだけです] –

関連する問題