React.memo 解决函数组件重复渲染

React.memo 是一个高阶组件，用于优化React函数组件的渲染过程。它会比较当前props和上次渲染时的props，如果它们拥有相同的值，组件就不会重新渲染。这可以帮助减少不必要的渲染和计算，从而提高性能。

以下是一个使用React.memo的例子：

import React from 'react';
 
function MyComponent(props) {
  return (
    <div>
      <p>这是一个组件</p>
      <p>接收到的属性是：{props.value}</p>
    </div>
  );
}
 
// 使用React.memo优化组件
export default React.memo(MyComponent, areEqual);
 
function areEqual(prevProps, nextProps) {
  // 如果传入的值相等，则不重新渲染组件
  return prevProps.value === nextProps.value;
}

在这个例子中，areEqual函数用于比较当前props和下一个props，以决定组件是否应该重新渲染。如果你不需要自定义比较逻辑，也可以简单地传入一个比较函数或者一个用于比较的属性：

export default React.memo(MyComponent, (prevProps, nextProps) => prevProps.value === nextProps.value);

或者使用内置的比较方式：

export default React.memo(MyComponent, React.memo.areEqual);

这样，只有当MyComponent的props.value发生变化时，它才会重新渲染。