1

大規模なコンポーネントを多数の非常に小さなコンポーネントに分割すると、コードのパフォーマンスが向上するかどうかは疑問です。そのため、アプリケーションは一度にDOMの小さな部分だけをレンダリングします。コンポーネントの一部だけが変更された場合、ReactはWHOLEコンポーネントをレンダリングしますか?

しかし、リアクションは、コンポーネントが大規模か小規模かにかかわらず、変更されたアプリの部分だけをレンダリングしている可能性があります。したがって、大規模なコンポーネントの小さな部分が変更された場合、Reactはコンポーネント全体ではなく、その小さな部分のみを再描画します。

第2段落のアサーションが正しいのですか、または大きなコンポーネントを多数の小さなコンポーネントに分割してパフォーマンスを向上させることはできますか?この質問にはReactJSとReact Nativeの両方が含まれています。私は彼らがこの側面で同じであることを前提としていますが、彼らが違うなら私は知りたいと思います。

答えて

1

私は自分自身をリアクトに没頭していたので、私の理解が有効であることを願っています。 Reactは仮想DOMを使用して実際のDOMのレンダリングを最適化します。基本的には2つを比較して、違いのあるDOMにパッチを当てるだけです。だから私はあなたの主張が正しいと信じています。

大きなコンポーネントを分割することについては、すべての状態と、コンポーネントの外観に依存していると思います。私は自分自身に尋ねるべき質問です:コンポーネントにカプセル化されて独立している複数のUIユニットがありますか?私のコンポーネントのどれが実際に状態の影響を受けていますか?

の状態が変更されない限り、コンポーネントは再レンダリングされません。反応し、開発者が状態変化上のコンポーネントのレンダリングを制御できるように、それは子コンポーネントだ影響しないライフサイクルフックshouldComponentUpdateを提供します。したがって、変更されないJSX要素が多い場合は、は、状態変更の影響を受ける要素をの要素に抽出する方がよいです。私は、変化しないアイテムで仮想DOMを更新しないことでパフォーマンスを得ることができると私は信じています。

この回答を書いているうちに、私はグーグルでこのブログのエントリ:React is Slow, React is Fast: Optimizing React Apps in Practiceを見つけました。私はそこに記載されているツールを使用していないが、私はすぐにそれらを試してみるだろう。私は、この記事があなたの質問の第2部分にいくつかの光を当てることができると信じています。

関連する問題