問題
父組件的state發(fā)生變化嫁佳，就會重新 render其下的子組件别惦、即使沒有用到的state，也會重新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í)例：
加年齡不會重新渲染子組件，改名字會杆烁！
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>
);
}
