問題

父組件的state發(fā)生變化，就會(huì)重新 render其下的子組件、即使沒有用到的state，也會(huì)重新render，不符合要求，需要優(yōu)化；

解決

使用React.memo包裹子組件

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

memo使用淺比較，如想深比較，根據(jù)官網(wǎng)例子，傳入自定義函數(shù)

import { isEqual } from "lodash";
function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 傳入 render 方法的返回結(jié)果與
  將 prevProps 傳入 render 方法的返回結(jié)果一致則返回 true，
  否則返回 false
  false 則為繼續(xù)渲染；
  true  則為阻止渲染
  */
return isEqual(prevProps,nextProps)
}
export default React.memo(MyComponent, areEqual);

實(shí)例：

加年齡不會(huì)重新渲染子組件，改名字會(huì)！

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)}>點(diǎn)我加一歲</button>
      <br />
      <button
        onClick={() => {
          setName("小王" + (Math.random(1) * 100).toFixed(2));
        }}
      >
        換名字
      </button>
      <Children name={name} />
      年齡 :{age}
    </div>
  );
}