React.js v18 路由 v6 中使用 React.memo 优化组件渲染：仅在 p2 变化时重新渲染

如果你希望在'p2'变化时重新渲染组件，但是'p1'不变化时不重新渲染组件，你可以使用'React.memo'来包装你的组件，并且指定一个自定义的比较函数来比较'p2'的变化。

以下是一个示例代码：

import React from 'react';

const Page = React.memo(({ p1, p2 }) => {
  // 这里是组件的渲染逻辑
  return (
    <div>
      <h1>p1: {p1}</h1>
      <h1>p2: {p2}</h1>
    </div>
  );
}, (prevProps, nextProps) => {
  // 自定义比较函数，只有 p2 变化时才重新渲染组件
  return prevProps.p2 === nextProps.p2;
});

export default Page;

在上面的代码中，我们使用了'React.memo'来包装'Page'组件，并且传入了一个自定义的比较函数。比较函数接收两个参数，'prevProps'表示之前的属性，'nextProps'表示新的属性。在比较函数中，我们只关心'p2'的变化，如果'p2'相等，则返回'true'，表示'props'没有变化，不需要重新渲染组件。

这样，当'p1'不变而'p2'变化时，'Page'组件就不会重新渲染，只有当'p2'变化时，'Page'组件才会重新渲染。