220415 useMemo


useMemo❓


関数
  • は、計算値を繰り返し使用する機能を有し、性能
  • を最適化することができる
    Hook
  • エコシステムでのレンダリングの最適化
  • 注記
    技術
  • は、コンピュータプログラムが繰り返し計算を必要とする場合、以前に計算した値をメモリに格納することによって、繰り返し計算を排除し、プログラムの実行速度を速める.
  • 反応器の伝言フォーマットに特徴があります
  • すなわち注釈は以前の値のみ:
    				<Memoized num="{1}" />
        <!-- 직전 elements를 사용 -->
        <Memoized num="{1}" />
        <!-- 새롭게 렌더링 -->
        <Memoized num="{2}" />
        <!-- 새롭게 렌더링 -->
        <Memoized num="{1}" />
  • 覚書は現在、以下の2つの理由によるものと考えられている.
  • 高価な演算を繰り返すことを避け、性能を向上させる
  • .
  • は、安定値
  • を提供する.

    きほんけいじょう

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  • useMemo Hookコメントされた値
  • を返します.

    import { useState, useMemo } from "react";
    
    const getAverage = (numbers) => {
      console.log("평균값 계산 중...");
      if (numbers.length === 0) return 0;
      const sum = numbers.reduce((a, b) => a + b);
      return sum / numbers.length;
    };
    
    const Average = () => {
      const [list, setList] = useState([]);
      const [number, setNumber] = useState("");
    
      const onChange = (e) => {
        setNumber(e.target.value);
      };
      const onInsert = (e) => {
        const nextList = list.concat(parseInt(number));
        setList(nextList);
        setNumber("");
      };
    
      const avg = useMemo(() => getAverage(list), [list]);
    
      return (
        <div>
          <input value={number} onChange={onChange} />
          <button onClick={onInsert}>등록</button>
          <ul>
            {list.map((value, index) => (
              <li key={index}>{value}</li>
            ))}
          </ul>
          <div>
            <b>평균값:</b>
            {avg}
          </div>
        </div>
      );
    };
    export default Average;

    詳細


  • React.memoとuseMemoの違い
  • https://sustainable-dev.tistory.com/137

  • React.memoは、要素をパラメータとして受け入れ、その要素を返します.

  • userMemoは戻り値のhookです
  • 参考資料
  • https://sustainable-dev.tistory.com/137
  • https://ko.reactjs.org/docs/hooks-reference.html