問題タブ [react-memo]

メモ化された機能コンポーネントがあります。親ライブラリ コンポーネントがレンダリングされると、react 呼び出しによって update memo コンポーネントが呼び出され、私の func. コンポーネントを再度レンダリングする必要があります。「current.ref === workInProgress.ref」の比較が失敗し、機能コンポーネントが再レンダリングされます。

「current.ref === workInProgress.ref」比較とはどういう意味ですか? これを理解するための良いドキュメントを教えてください。ティア

私はスポーツアプリを持っていて、各チームのフィクスチャを次のように表示しています:

上記の各チームのロゴの画像を表示していますが、ちらつきに気付き、このコンポーネントがレンダリングされるたびに発生します。上部のナビゲーション ビューでレンダリングされます。つまり、navbar のフィクスチャをクリックすると、このコンポーネントが表示されます。

ちらつきが気に入らないので、パフォーマンスを向上させようとして、react.memo を使用することにしました。

上記を React.memo で次のようにラップしました。

しかし、何らかの理由で、コンポーネントのレンダリング時に console.log をログに記録していませんが、上部に次の行をログに記録しています: console.log('rendering again').

なぜログに記録されないのですか？すべてのレンダリングでこのちらつきを防ぐにはどうすればよいですか? フィクスチャを表示したいだけで、代わりに点滅し、ちらつき、表示されます（これの最初のレンダリングでは問題ないかもしれませんが、後続のすべてではそうではありません）

親コンポーネントのループ内にある1つのサブ子コンポーネントがあります。サブ子コンポーネントの 1 つが親コンポーネントの状態を更新している場合、ループしているため、すべての子を再レンダリングしています。各反復の再レンダリングを回避するにはどうすればよいですか。その特定のサブ子を更新する必要があります。

現在の動作: 上記のコードでは、子コンポーネントの 1 つでチェックボックス (サブ子) をクリックすると、親コンポーネントの状態 (selectedChild) が更新されます。したがって、ループが実行され、すべての子 (すべてのテーブル行) が再レンダリングされます。

予想される動作: その特定のサブ子のみを再レンダリングする必要があります (子を再レンダリングしてはいけません)

デモ: https://codesandbox.io/s/reactqa2-0c0md?file=/src/App.js

少し関連する質問:親コンポーネントの状態が更新されたときにループするすべての子コンポーネントを再レンダリングしないようにする方法

機能コンポーネント:

WebStorm は次のエラー/警告を表示します:

このコンポーネントをキャッシュしたいだけなので、親が変更されても、渡された小道具はNewRestRequestCoreForm再NewRestRequestCoreFormレンダリングされません。

コンポーネントは次のように使用されます。

私が間違っていることと、これを修正するにはどうすればよいですか?

編集：

メモを適用して、または適用せずに単純なコンポーネントを使用したところ、警告があっても機能します!