介紹一下React.memo

　　`React.memo` 是 React 中的一個高階組件(Higher-Order Component)，用于優化函數組件的性能。它類似于類組件中的 `shouldComponentUpdate` 方法，用于避免不必要的組件重新渲染。

　　當函數組件的 props 沒有發生變化時，`React.memo` 可以緩存該組件的渲染結果，并在下一次渲染時復用緩存的結果，從而避免不必要的重新渲染。它通過對前一次渲染時的 props 和下一次渲染時的 props 進行淺比較來確定是否重新渲染組件。

　　使用 `React.memo` 很簡單，只需要將函數組件作為參數傳遞給 `React.memo`，它將返回一個經過優化的組件。這個優化的組件將會在 `props` 沒有變化時復用之前的渲染結果。

　　以下是一個示例，演示了如何使用 `React.memo` 來優化組件的渲染：　　

import React from 'react';

function MyComponent({ name }) {
  console.log('Rendering MyComponent');
  return <div>Hello, {name}!</div>;
}

const MemoizedComponent = React.memo(MyComponent);

function App() {
  const [name, setName] = useState('John');

  return (
    <div>
      <MemoizedComponent name={name} />
      <button onClick={() => setName('Jane')}>Change Name</button>
    </div>
  );
}

　　在上述示例中，`MyComponent` 是一個簡單的函數組件，用于顯示一個問候信息。通過使用 `React.memo` 將其包裹，`MemoizedComponent` 組件將會在 `name` 屬性沒有變化時復用之前的渲染結果。

　　在點擊 "Change Name" 按鈕時，只有受影響的組件部分會重新渲染，而不是整個組件。這是因為 `React.memo` 對 `props` 進行了淺比較，并且發現 `name` 屬性沒有變化，所以復用了之前的渲染結果。

　　需要注意的是，`React.memo` 默認使用淺比較來判斷 `props` 是否發生變化。如果 `props` 包含復雜的數據結構，如對象或數組，而且其引用沒有發生變化，但其內容可能已經發生了變化，這時可能會導致不準確的結果。為了避免這種情況，可以自定義一個比較函數作為 `React.memo` 的第二個參數，來進行深層比較。