React.memo

2189 ワード

useMemo テキストリンク

todoをやり直します.memoはさらに最適化できる!?
はい、アルゴリズムのメモ概念を借りました.
実際、todoが変化すると、変更後のtodoを選択的にレンダリングするだけでよいが、変更されず、変更を必要としない他のtodoも一緒にレンダリングするので効率が低い.下図のように.

最後のtodoを削除する場合は、削除したtodoが存在しないだけでよいが、以上のtodoはレンダリングされる.
ではmemoを適用しましょう.参照としてReactmemoはHOCです.すなわち、ロードされた要素を取り囲まなければならない.
簡単ですね.ロードされたサブコンポーネントにmemoを追加するだけです.(react.pureComponentとほぼ似ています)
渡されたpropsが変更されていない場合は、memoに保存されているコンポーネントを使用します.

// todo.js

import { memo } from 'react';

function Todo({ id, completed, task }) {
  
  console.log('TODO RENDERING', task);
  
  blah
  blah
  blah
}
export default memo(Todo);

それは次のようにレンダリングされます.

これはさらにアップグレードされたtodoです.
ただし、不必要な再レンダリングが行われると確信した場合に使用します.なぜなら、前述したように、コンピュータのメモリに格納されているため、不確実にあちこちで使用すると、パフォーマンスが低下したり、予期せぬエラーが発生する可能性があります.
アクリル、また関数型素子においてもhookとして使用することができる.この場合はuseMemoを使用できます.

Reference

この問題について(React.memo), 我々は、より多くの情報をここで見つけました https://velog.io/@yhko1992/React-Hook-useMemo

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Pinia