网上的教程看得挺乱的, 还是希望大家手动打代码, 去体验下, 印象更好
React.memo 和 useMemo 都是减少组件中不必要的开支, 提升性能
其中, memo是子组件本身是否渲染, useMemo则是子组件prop监听函数
memo
memo 很像shouldComponentUpdate生命周期还判断组件是否渲染
不使用memo
const Child = ({ name, children }: any) => {
function changeName(name: string) {
console.log("changeName");
return name + "改变name的方法";
}
console.log("Child组件更新");
const otherName = changeName(name);
return (
<>
{otherName}
{children}
>
);
};
function Parent() {
const [count, setCount] = useState(0);
const [name, setName] = useState("名称");
return (
<>
{count}
>
);
}
export default Parent;
点击btn1, btn2按钮二者都会触发Child了, 都会打印
Child组件更新
changeName
点击btn1, Child没用count属性却还是渲染了, 所以就有了memo
修改Child.tsx
const Child = React.memo(({ name, children }: any) => {
function changeName(name: string) {
return name + "改变name的方法";
}
console.log("Child组件更新");
const otherName = changeName(name);
return (
<>
{otherName}
{children}
>
);
});
点击btn1, 就不会在触发Child了
useMemo
useMemo 更加具体到组件内部的调用方法
const Child = ({ name, children }: any) => {
function changeName(name: string) {
console.log("changeName");
return name + "改变name的方法";
}
console.log("Child组件更新");
const otherName = changeName(name);
return (
<>
{otherName}
{children}
>
);
};
function Parent() {
const [name, setName] = useState("名称");
const [content, setContent] = useState("内容");
return (
<>
{content}
>
);
}
点击btn1, btn2按钮二者都会触发Child了, 都会打印
Child组件更新
changeName
点击btn2的时候, 因为Child重新渲染, 所以导致changeName也跟着打印了
但是btn2只改变content, 没改变Child中changeName需要的属性name,
对此, 我们希望改变content的时候, 不触发组件中changeName函数, 因为changeName只使用到name属性, 因此我们应该使用useMemo
const Child = ({ name, children }: any) => {
function changeName(name: string) {
console.log("changeName");
return name + "改变name的方法";
}
console.log("Child组件更新");
const otherName = useMemo(() => changeName(name), [name]);
return (
<>
{otherName}
{children}
>
);
};
但我们点击btn2的时候, 只触发了
Child组件更新