Reactjs：レンダリングの状態を何度か変更してください。

Question

レンダリング機能の状態を変更することは想定されていません。

これは理にかなっていますが、私は自分自身を特定の状況に置いています。私はオフラインアプリケーションを構築しており、オフラインストレージシステムを使用してデータを取得しています。さて、あるデータを取得するためにメソッドが呼び出されると、キャッシュがチェックされ、期限が切れていなければコンポーネントはデータにアクセスすることができず、何も起こりませんが、期限が切れていればAPI関心のあるコンポーネントが再レンダリングされます。

これらのメソッドは、新しいデータを取得して再レンダリングするAPIに行くため、最初に呼び出されたときにコンポーネントの状態を変更し、データは既に存在するため状態を変更しませんキャッシュ内にある。

コンポーネントのマウント時にこれらのメソッドを呼び出すことができましたが、これは私が今やっていることですが、再呼び出しが必要な場合は、コンポーネントをアンマウントして再マウントする必要があります。これはこれを行う唯一の方法でしょうか？

ありがとうございます！

Answer 1

最初のステップは、既に取得した状態管理とレンダリングを分離する必要があることを理解することです。

これで、外部状態/キャッシュ要素を観測可能なオブジェクトとして考えることができます（つまり、observableObject.listen('change', onChangeHandler)のようなことをしたい、eventsライブラリのEventsEmitterを使用できます）。 You do that listening on componentDidMount and clean up in componentWillUnmout.そのonChangeHandlerは非常に単純です：propsが渡されたDOMノードを出力する純粋な関数であり、それ自身のstateであるコンポーネントの再レンダリングを引き起こす、this.setState({ value: observableObject.value })です。

これは、キャッシュが無効かどうかを確認するロジックが値のリクエスト（レンダリング内）ではなく、オブジェクトが自己完結型であると考えていることを意味します。リスナーに変更があったことを通知する必要があるかどうかを定期的にチェックします。 JSは並列実行をしないので、スレッドと同期を処理する必要はありません。レンダリング関数が実行される時点で、最新の値を持つことがわかります。キャッシュの実行を確認するロジックをレンダリングした後、更新する必要があると判断した場合は、onChangeHandlerがstateに変更されたため、以前のリスナーに通知してコンポーネントを再レンダリングします。

希望しました。