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