问题

父组件的state发生变化，就会重新 render其下的子组件、即使没有用到的state，也会重新render，不符合要求，需要优化；

解决

使用React.memo包裹子组件

const Children= memo(() => {
  return <>xxx</>;
});

memo使用浅比较，如想深比较，根据官网例子，传入自定义函数

import { isEqual } from "lodash";
function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  false 则为继续渲染；
  true  则为阻止渲染
  */
return isEqual(prevProps,nextProps)
}
export default React.memo(MyComponent, areEqual);

实例：

加年龄不会重新渲染子组件，改名字会！

import { useState, memo, useEffect } from "react";
import { isEqual } from "lodash";

const Children = memo(
  ({ name }) => {
    console.log("我是子组件");
    return (
      <>
        <h1>{`hello ${name}!`}</h1>
      </>
    );
  },
  (prevProps, nextProps) => {
    return isEqual(prevProps, nextProps);
  }
);

export default function Home() {
  const [name, setName] = useState("小王");
  const [age, setAge] = useState(25);

  return (
    <div>
      <button onClick={() => setAge(age + 1)}>点我加一岁</button>
      <br />
      <button
        onClick={() => {
          setName("小王" + (Math.random(1) * 100).toFixed(2));
        }}
      >
        换名字
      </button>
      <Children name={name} />
      年龄 :{age}
    </div>
  );
}