StatusDisplay

次に、StatusDisplayについて説明します.私が実現したStatusDisplayは、現在の植物工場の環境状態を表示するコンポーネントです.

このコンポーネントのパフォーマンスを最適化する方法を検討しました.この構成部品の特徴は、現在のステータスを所定の時間内に更新する必要があることです.この最適化の鍵は、インストールに少し時間がかかっても、24時間開いているスマートフィールドダッシュボード上の構成部品の更新時間を短縮することです.

RESULT

1秒ごとにデータベースから環境状態データを取得し、更新するStatusDisplayコンポーネントを10秒以内に観察します.データベースに新しい値を追加して比較します.再調整後の構成部品は変更されません.

事前構成の最適化

最適化されたプロファイル

最適化前の構成では、0.1 ms未満の構成はすべて除外され、最適化後の低コミットは1つしかありません.両方のプロファイルのパフォーマンスを比較したいのですが、65件のコミットで計算できないため、大きな違いだと説明します.

HOW

Component Structure

React.memo

Custom Hook (with useSelector)

WHY

1. Component Structure

コンポーネント構造は、Loginコンポーネントに書き込まれているかどうかにかかわらず、パフォーマンスの最適化方法です.

Before Component Structure

|___ StatusDisplay
    |___ Figure
    |___ index

After Component Structure

|___ StatusDisplay
    |___ Figure
    |___ index
    |___ EnvironmentText

以前のコンポーネント構造では、usStateを使用して環境変数を作成し、指定した時間にdbにアクセスし、stateを変更するためにデータをインポートしました.本当に非効率最終的に変更されたのはテキストのみで、StatusDisplay構成部品全体を再レンダリングする必要があります.したがって、次のコンポーネント構造では、テキストのみを置換するために個別のEnvironmentTextコンポーネントを作成できます.

2. React.memo

これは,Login素子における性能最適化法である.これほど簡単で効果的な方法はない.最適化前のgifに65件のコミットがあったのは、コメントが書かれていないためです.新しく入力したデータ値が変化した場合、更新は正しいが、最適化前にコメントが書かれていないため、構成部品全体を白黒なく更新して表示します.
反応を習い始めたばかりの頃はmemoを読んだことがありますが、機能実現には書くことがないので、先にスキップして、今から修正し直します.というより今やった方が苦にならないmemoについての詳しい説明は他にもたくさんあります

3. Custom Hook (with useSelector)

以前の構成部品では、環境変数をワイヤとして保存する必要はありません.これはStatusDisplayがdbから直接インポートしたためです.最適化後、データインポート部分を上位コンポーネントに渡し、上位コンポーネントをReduxに保存した場合、ユーザー・セレクタを使用して傍受したEnvironmentTextコンポーネントは、環境データが変化した場合にのみ更新されます.

export default function useSubscribeEnvironmentStatus(
  section: string,
  name: string,
) {
  return useSelector((state: RootState) =>
    state[StorageKeys.ENVIRONMENTS][section][name as keyof ReducerEnvironmentDto], shallowEqual
  )
}

上記のcustom hookを使用すると、Reduxの環境データ値が表示されます.

Conclusion

最適化中にセレクタ、reactを使用します.memoを書くことを決心すれば、ほとんどの素子の構造が変わると思います.useStateを使用する場合、サブコンポーネントに降格しmemoを使用してレンダリング回数を減らすことができますか?Redux値をインポートするときに、storeインポートに直接アクセスするのではなく、UserSelectorを使用することはできませんか?など、最適化方法を事前に考慮すると、構造をより迅速に決定できます.