useRef、useMemo、useCallbackの違い

2582 ワード
プロジェクト テキストリンク
useMemoとuseCallbackはhookであり、反応器のレンダリング性能を最適化するために使用されます.
  • 関数型素子は関数のみで、jsxの関数を返します.
  • レンダリング要素とは、その関数を呼び出すことによって実行されるものである.関数を実行するたびに内部で宣言される표현식(변수, 또 다른 함수 등)도 매번 다시 선언되어 사용된다.
  • エレメントは、自身の状態が変化した場合や親から入手したアイテムが変化した場合に再レンダリングされます.(하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 되는것이 기본이다.)
    • useRef
    userefを使用する必要がある場合
  • フォーカス管理、テキスト選択領域またはメディア再生時
  • 直接動画実行時
  • サードパーティ製DOMライブラリをreactとともに使用する場合
    =>userefはDOMにアクセスする必要がある場合に使用されます.
  • DOMを指し、宣言const value = useRef();ラベルに入れるref={value}該当するDOMを指定できます.
  • userefの使用により、RefがDOMにアクセスできるようになり、Refオブジェクトの現在の使用を希望するDOMを示す.また、使用value.current.focus()해당 DOM으로 focus를 시킬 수 있다.
    • const id = useRef(1);
id.current = N;			// N은 임의의 정수
// ref안의 값은 수정이 되어도 렌더링이 되지 않는다. 그러므로 렌더링이 되지 않는 값을 관리할 때 사용한다.
    useMemo
  • 메모리제이션된 값을 반환
  • CASE:特定の場合に実行しなければならない関数が、コンポーネントのレンダリング条件に従って継続的に実行される場合、
  • useMemoはdepsが変更される前に値を記憶してもよいし、実行後に値を保存する役割としてもよい.
  • 複雑な関数の戻り値を記憶することはuserefとは異なる.
  • userefは記憶用특정 값、usemoは記憶用복잡한 함수의 return 값
    • const num = useMemo(callback, deps);
    useCallback
  • 메모리제이션된 함수를 반환
  • CASE:useMemoが特定の値を再利用するためである場合、useCallbackは特定の関数を再利用するためである.
  • サブエレメントに関数をpropsとして提供する場合は、必ずuseCallbackを使用して再レンダリングを防止してください.
    • const func1 = useCallback(callback, deps);
    redis学習-クラスタモードcluster
    2056年月日カレンダー