[TIL] 2022/03/24

Today I Learned

userefを使用すると、一部の変数値を変更してもstateなどの再レンダリングは起こりませんが、すぐに変更を確認しても遅延は起こりません(setStateなど)

これらの特性を持つuserefは、通常DOMの参照およびインポートにのみ使用され、カウントまたはカウントの値を書き込む場合にはuserefを使用することが望ましい.これを使用すると、遅延や再レンダリングが心配されないためです.

userEffectにunmount関数を追加すると、ステータスが変更される前にアクティブになります。

  useEffect(() => {
    console.log("user 값이 설정됨");
    console.log(users);
    return () => {
      console.log("user 가 바뀌기 전..");
      console.log(users);
    };
  }, [users]);

上記の論理が記述されている場合、setuUsersを使用し、ユーザが変更する前にreturnに入れる関数はactivateであると考えられる.もちろん、アンインストール関数の元のように、アンインストール時にもアクティブになります.
**上記の機能があるので、userEffect内でsetIntervalなどを使用する場合は、アンインストール関数clearIntervalを使用することが望ましい.なぜなら、stateが変更されるたびにsetIntervalを実行すると、再実行する前に以前の間隔をクリアする必要があるからです.

React.memo&useCallback&useMemoは必要に応じてのみ使用

前回も勉強しましたが、最適化ツールを乱用することはできません.かえって逆効果だ.React.memoなどの場合、論理を最適化する必要がない場合は、親コンポーネントをレンダリングするときにpropsを直接比較する論理が最適化されるため、比較する必要はありません(この例では、親コンポーネントが再レンダリングされた場合、論理を比較する必要はありませんが、子コンポーネントは再レンダリングする必要はありません).したがって、useCalback、React.memoは最適化が必要な場所に書かなければならない.通常、再レンダリングをほとんど必要としない構成部品や親構成部品は再レンダリングされることが多く、子構成部品はそうしないで再レンダリングされます.memoが書き込まれ、親コンポーネントがpropsからpropsに値を降格した場合、関数がある場合は無条件に再レンダリング時にuseCallbackに書き込まれます.

useMemoは、オブジェクトをpropsに降格するか、mapやfilterなどの論理で返された値に値を書き込み続けます。

たとえば、一部の人がフィルタリングを続け、=trueのランキングの人を出力する必要があると仮定します.このとき、

const People = () => {
  const [people, setPeople] = useState(0);
  const rankedPeople = () => people.filter(el => el.ranked=true); 

  return (
      <div>{rankedPeople}</div>
  )
};

export default People;

上記の構成部品が存在する場合、People構成部品はpeople state値を変更することなく、People構成部品を再レンダリングするたびにフィルタリングを継続します.でもそこ.

  const rankedPeople = useMemo(() => people.filter(el => el.ranked=true),[people]);; 

これにより、people stateが変更された場合にのみ、フィルタロジックを実行して最適化できます.また、useMemoがuseCallbackに書き込まれると、関数は新しい参照値を持ち続け、propsとして再生され、propsに渡され、再レンダリングのホットスポットをつかむことを望んでいます.

const someObject = useMemo(() => { someObject's values },[]);

以上のようにpropsに下げると、新しい値を参照して再生するのではなく、既存の値を記憶して使用します.したがって、無意味なレンダリングは発生しません.