介绍一下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` 的第二个参数，来进行深层比较。