useMemo——提高React性能的利器

一、什麼是useMemo

React中提供了一種優化組件性能的鉤子函數——useMemo。它可以幫助我們避免在每次渲染時都執行的昂貴計算。

useMemo鉤子函數接收兩個參數：計算函數和依賴項數組。計算函數會在渲染期間執行，依賴項數組中的值是用來比較的，如果某個依賴項發生變化，useMemo會重新計算數值。否則，它將返回上一次計算結果的值。

示例代碼：

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

二、如何使用useMemo

1、需要優化渲染的函數

因為useMemo是一個可以計算複雜值的鉤子函數，所以只有當你的組件渲染的元素個數非常多或者需要進行複雜計算時，你才需要使用useMemo來進行性能優化。

示例代碼：

  function App() {
    const arr = [1,2,3,4,5];
    const memoizedArr = useMemo(() => {
      return arr.map(item => item * item)
    }, [arr]);

    return (
      <div>
        <ul>
          {memoizedArr.map(item => <li>{item}</li>)}
        </ul>
      </div>
    );
  }

2、依賴項數組使用

useMemo的第二個參數中傳遞的是一個依賴項數組。這個數組中傳遞的值會在每次渲染時與上次的值進行比較。只有當它們不同時，useMemo才會重新計算數值。

示例代碼：

  function App2() {
    const [count, setCount] = useState(0);

    const memoizedValue = useMemo(() => {
      const sum = Array.from({ length: count }, (_, index) => index + 1).reduce((a, b) => {
        return a + b;
      });
      return sum;
    }, [count]);

    return (
      <div>
        <h3>count:{count}</h3>
        <button onClick={() => setCount(count + 1)}>add count</button>
        <span>memoizedValue:{memoizedValue}</span>
      </div>
    );
  }

3、將useMemo用在useEffect中

useMemo還可以用來優化像useEffect這樣的副作用鉤子函數。下面的示例展示了如何使用useMemo來減少不必要的渲染。

示例代碼：

  function App3() {
    const [count, setCount] = useState(0);
    const [step, setStep] = useState(1);

    const memoizedValue = useMemo(() => ({ count }), [count]);

    useEffect(() => {
      console.log('count:', count);
    }, [memoizedValue]);

    return (
      <div>
        <h3>count:{count}</h3>
        <h3>step:{step}</h3>
        <button onClick={() => setCount(count + step)}>add count</button>
        <button onClick={() => setStep(step + 1)}>add step</button>
      </div>
    );
  }

三、useMemo使用的常見錯誤

1、忽略依賴項

為了使useMemo正常工作，必須在第二個參數中傳遞所有相關的依賴項。如果忽略了一個重要的依賴項，則useMemo將不會執行預期的更新操作。

示例代碼：

  function App4() {
    const [count, setCount] = useState(0);
    const [step, setStep] = useState(1);

    const memoizedValue = useMemo(() => {
      const sum = Array.from({ length: count }, (_, index) => index + 1).reduce((a, b) => {
        return a + b;
      });
      return sum;
    }, []); // 這裡忽略了count，所以memoizedValue永遠不會變化

    return (
      <div>
        <h3>count:{count}</h3>
        <h3>step:{step}</h3>
        <button onClick={() => setCount(count + step)}>add count</button>
        <button onClick={() => setStep(step + 1)}>add step</button>
        <span>memoizedValue:{memoizedValue}</span>
      </div>
    );
  }

2、過度使用useMemo

雖然useMemo可以優化組件的性能，但是過度使用它會導致代碼更加複雜。有時候，完全沒有必要優化某些計算，因為它們的成本非常低。

示例代碼：

  function App5() {
    const [count, setCount] = useState(0);

    // count的平方數
    const memoizedValue = useMemo(() => {
      return count ** 2;
    }, [count]);

    // 僅僅只是count的顯示
    const memoizedValue2 = useMemo(() => {
      return `count:${count}`;
    }, [count]);

    return (
      <div>
        <h3>{memoizedValue2}</h3>
        <p>memoizedValue:{memoizedValue}</p>
        <button onClick={() => setCount(count + 1)}>add count</button>
      </div>
    );
  }

四、總結

useMemo是一個非常有用的鉤子函數，可以幫助我們在React應用程序中提高性能。但是，如果不適當地使用它，會導致代碼變得更加難以閱讀和理解。因此，在使用useMemo之前，請仔細考慮您要優化的值是否真的太昂貴，是否需要優化。