可能なすべての要素をレンダリングするか、要求に応じてレンダリングする

Question

ボタンを介して可視性が切り替わる右サイドバーを持つアプリケーションがあります。そのサイドバーには、[チャット]、[ヘルプ]、[検索]など、いくつかの機能があります。私は同様の機能を持ち、すべてのノードがレンダリングされていることに気付いただけで、CSS経由で隠されているアプリからいくつかのプレーンなHTMLを探していました。

私は同じことをする必要があるので、これはReactで行うのが良い考えかどうか考えていました。しかし、React要素には、更新時にrenderメソッドを呼び出す状態があることがわかりました。サイドバーが開いているかどうか、そしてサイドバーの中に何が入っているかを格納するために、この状態を使用することができます。

これはリアクションの方法ですか？表示されていない場合でもすべてのノードをレンダリングする方が良いか、または状態の変更によって要求に応じてレンダリングされたノードを持つ方が良いでしょうか？

Answer 1

私の気持ちは、目に見えるものをレンダリングするだけで、より標準的なリアクション方法ですが、この場合は主にパフォーマンスの決定です。すべてをレンダリングし、CSSで可視性を切り替えるだけであれば、最初のレンダリングには時間がかかります（ただし、時間差は関連性がないか、または目立つことさえありません）。表示されている部分だけをレンダリングすると、Reactはサイドバーのコンテンツが変更されるたびに小さな再レンダリングを行う必要があります。 （これは目立つ時間ではないかもしれません。）

パフォーマンスをテストする場合は、両方を試してみることをお勧めします。しかし、あなたはどちらかといえば間違っていないと思う。