コンピュータサイエンス(Computerサイエンス)のインタラクティブレンダリングパフォーマンスの最適化

クラス構成部品ではなく、関数構成部品を使用するようになりました.そのため、関数構成部品ベースのパフォーマンスを最適化する方法について説明します.

1)ステータス宣言

ある状態が変化すると、リアクターはその状態を宣言する要素とそのサブ要素を再レンダリングします.したがって、ステータス宣言の位置を設計することは、レンダリング回数に大きな影響を与えます.stateは、stateを使用する構成部品の最上位レベルの構成部品に宣言することが望ましい.stateをこのstateを使用するトップレベルの構成部品よりも高度な構成部品に宣言すると、stateを使用しない構成部品の多くは、stateの変更によって不要な再レンダリングを経験します.
stateがオブジェクトタイプの場合、オブジェクトが大きく複雑な構造の場合、分割できるだけ分割します.サブ構成部品がこの状態で輪郭の一部のみを使用している場合は、その輪郭が変化した場合にのみ、その構成部品が再レンダリングされます.複雑なオブジェクトとして宣言されたstateを分割しないと、サブエレメントで使用されていない別のPropertyの値が更新されても、再レンダリングが発生します.

2) React.memoを使用した構成部品コメントの作成

React.memoはHookではないので、クラス素子にも使用できます.
関数型構成部品ではshouldComponentUpdateは使用できませんが、反応式公式文書ではReactが使用されます.メモを見せています.
React.memoで構成部品のpropsを変更しない場合は、再レンダリングしないように設定して、関数型構成部品の再レンダリング性能を最適化できます.
React.memoはまた、コールバック関数を使用して、コメント作成を適用するかどうかを判断することもできます.

//UserList.jsx
import { useState, useRef } from "react";
import Item from "./Item";
import Average from "./Average";

function UserList() {
  let numberRef = useRef(2);
  const [text, setText] = useState("");
  const [users, setUsers] = useState([
    {
      id: 0,
      name: "sewon",
      age: 30,
      score: 100
    },
    {
      id: 1,
      name: "kongil",
      age: 50,
      score: 10
    }
  ]);

  const average = useMemo(() => {
    console.log("calculate average. It takes long time !!");
    return users.reduce((acc, cur) => {
      return acc + cur.score / users.length;
    }, 0);
  }, [users]);

  
   const addUser =() => {
    setUsers([
      ...users,
      {
        id: (numberRef.current += 1),
        name: "yeonkor",
        age: 30,
        score: 90
      }
    ]);
  }



  return (
      <div>
       <input
         type="text"
         value={text}
         placeholder="아무 내용이나 입력하세요."
         onChange={(event) => setText(event.target.value)}
        />
       <Average average={average} />
       <button className="button" onClick={addUser}>
        새 유저 생성
       </button>
      {users.map((user) => {
        return (
          <Item key={user.id} user={user} /> // 아래 코드 참고
        );
      })}
      </div>
  );
}

export default UserList;

//Item.jsx
import React,{ memo } from "react";

function Item({ user }) {
  console.log("Item component render");

  return (
    <div className="item">
      <div>이름: {user.name}</div>
      <div>나이: {user.age}</div>
      <div>점수: {user.score}</div>
      <div>등급: {result.grade}</div>
    </div>
  );
}

export default memo(Item);

React.memoを適用して新しいユーザボタンを生成し、usersの配列の長さを変更し、UserList.jsxをレンダリングしますが、新しく追加されたItem万の新しいレンダリングでは、レンダリングされたItemはレンダリングされません.

3) useMemo

この関数はreact Hookの1つで、reactのCPU消費が深刻な関数をキャッシュします.
エレメント内の関数が変化するたびに値を返すのに時間がかかる場合、エレメントを再レンダリングするたびに関数が呼び出され、多くの時間がかかります.関数によって返される値がサブエレメントにも使用される場合、サブエレメントは関数が呼び出されるたびに新しい値を受信して再レンダリングします.
依存変数が変わらない場合、useMemoは関数を再呼び出す必要はなく、以前に返された参照値を再使用します.すなわち、関数呼び出し時間を制御したり、同じ値をpropsとして受信したサブエレメントの再レンダリングを防止したりすることができる.

4) useCallback

useMemoは、返される値にコメントを提供し、useMemoのuseCallbackと同様にコメント関数宣言に使用します.
親構成部品から子構成部品に関数を渡すと、親構成部品を再レンダリングするたびに、親構成部品に新しい宣言関数が作成されるため、毎回新しい参照関数が子構成部品に渡されます.したがって、サブエレメントもpropsによって再レンダリングされます.
ただし、useCallbackで関数を宣言すると、従属変数が変わらない場合は、関数を再作成する必要はなく、以前の参照変数をサブエレメントに直接propsとして渡すので、サブエレメントの再レンダリングを防止するためにpropsが変更されていないと考えられます.

5)サブコンポーネントのpropsにオブジェクトを渡す場合は、新しいオブジェクトの作成に注意してください。

通常、サブコンポーネントのprops値にオブジェクトを渡す場合は、新しく作成したオブジェクトをコンポーネントの作成者関数またはオブジェクトテキストに渡すことに注意してください.

// 생성자 함수
<Component prop={new Obj("x")} />
// 객체 리터럴
<Component prop={{property: "x"}} />

これは、新しく作成したオブジェクトがリカバリポイント、props、または宣言されたstateを参照するのではなくpropsに入るため、コンポーネントを再レンダリングするたびに新しいオブジェクトが作成され、サブコンポーネントとして渡されます.レンダー最適化(Render Optimization)テクノロジーを使用しても、サブエレメントのアノテーションにはなりません.propsに渡されたオブジェクトが同じ値を持っていても、新しく作成されたオブジェクトは前のオブジェクトとは異なる参照アドレスを持つオブジェクトであるため、コメントは無効になります.したがって、コンストラクション関数やオブジェクト文字を使用してオブジェクトを作成してサブエレメントに渡すよりも、サブエレメントに必要なデータ加工を行うためにstateをそのままサブエレメントに渡します.

6)構成部品をマッピングする場合、キー値としてインデックスは使用されません。

通常、エレメントをマッピングするときにキー値にインデックス値が多く追加されます.リアクターでマッピングする場合は、index値をキーとすると、配列の間に要素が挿入されると、配列の後のすべての要素がindexに変更されるように、一意のキーを強制的に付与する必要があります.これにより、キー値が変更され、再ロードされます.また,keyとデータが一致しないため,相互にインターリーブする副作用も生じる.したがって、key値の場合、index値ではなく一意のidを使用することが望ましい.