问题
父组件的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>
);
}
