React.jsで非同期データを読み込むときにUIがちらつくのを防ぐ
IndexedDBにいくつかのデータがあり、非同期にしかアクセスできません。そのデータを使用してReact.jsUIを構築したいと思います。一般的な考え方は、IndexedDBからデータをロードし、そのデータに基づいてUIを表示する複数のReactコンポーネントがあり、ユーザーは現在表示されているコンポーネントを切り替えることができるということです。
私の懸念は、余分なUIのちらつきなしにこれをエレガントに実現する方法がわからないことです。非同期データの読み込みをcomponentDidMountで行い、データを_this.state_に入れることができますが、終了する前にrenderが呼び出され、何も表示しないか、プレースホルダーを表示する必要がありますIndexedDBからのデータが取得されている間、ほんの一瞬のデータ。
IndexedDBからのデータがロードされるまで、renderにしないほうがいいです。ロードに時間がかからないことはわかっています。新しいデータがロードされている間も前のコンポーネントが表示され続けるので、ちらつきは2つ（古い->空白/プレースホルダー）ではなく1つだけです（古い->新しい）。 ->新規）。これは、通常のWebページの動作に似ています。あるWebサイトから別のWebサイトへのリンクをクリックしても、リンクされたWebサイトのサーバーが応答するのを待っている間、ブラウザーはすぐに空白/プレースホルダー画面を表示しません。
_React.render_を呼び出して_this.props_経由で渡す前に、Reactコンポーネントの外部でデータを読み込むことができると思います。しかし、ネストしているため、面倒に思えます。コンポーネントはトリッキーになり、一部のコンポーネントは時間の経過とともに更新され、それらを初期化するのとまったく同じコードを介してIndexedDBから新しいデータをプルします。したがって、データを_this.state_に格納するための理想的なユースケースのようです。新しいデータが利用可能であるというシグナルを受け取ったときに、コンポーネント自体の中でそれを更新できます。初期化と更新は、_this.state_...にいくつかの値を設定するthis.loadData()関数を呼び出すのと同じくらい簡単です。次に、前述の余分なちらつきがあります。
誰かもっと良いアイデアはありますか？この問題の標準的な解決策は何ですか？それは本当にミリ秒の空白/プレースホルダーのちらつきがあるだけなのですか？
コメントから、前の実装での動作（必要なデータをフェッチするまでナビゲートするのを待つ）が望ましい目標のように聞こえます。その場合、ちらつきを発生させずにこれを行う最善の方法は、外部オブジェクトを使用して状態を管理し、データがフェッチされたときにデータを小道具として渡すことです。
Reactルーターには、ナビゲートする前に特定のコンポーネントのデータをフェッチするためのwillTransitionToフックがあるかなり良いソリューションがあります。これには、問題が発生した場合にエラーを簡単にキャッチできるという追加の利点があります。
新しいリンクで更新：