React — React.memo

React.memo 是 React 提供的一个优化高阶组件，用于函数组件的性能优化。它类似于类组件中的 shouldComponentUpdate，可以帮助避免不必要的组件重新渲染。

使用 React.memo 可以很方便地对函数组件进行性能优化，但需要注意的是，它只进行浅比较，如果 props 包含复杂数据结构，需要确保在父组件中避免直接修改这些数据，以免出现意外的渲染行为。

import React from 'react';

const MyComponent = React.memo(({ name }) => {
  return <div>{name}</div>;
});

// 在父组件中使用
function ParentComponent() {
  const [name, setName] = React.useState('Alice');

  const handleClick = () => {
    setName('Bob');
  };

  return (
    <div>
      <MyComponent name={name} />
      <button onClick={handleClick}>Change Name</button>
    </div>
  );
}