场景一：页面A使用了子组件B，而且给子组件没有接收任何参数，此时如果A中的某个状态发生改变，则A/B组件同时会渲染。如果我们想优化一下，不希望B组件渲染，此时用可以用memo包裹子组件即可。
import Child from “child”;
export default function A(props) {
return (
<div>
<p>父组件A</p>
<Child />
</div>
);
}
import { memo } from “react”;
const B = (props) => {
return <div>子组件B</div>;
};
export default memo(B);
场景二：页面A使用了子组件B，而且给子组件传递了函数test()，此时如果A中的状态改变，则A/B同时会渲染。如果我们想优化一下，不希望B组件渲染，此时用可以用memo包裹子组件，然后使用useCallback包裹test()，test()有依赖项，加入到useCallback的第二个参数中。
import { useCallback } from “react”;
import Child from “child”;
export default function A(props) {
const test = useCallback(() => {
console.log(“test”);
}, []); //如果业务有变量依赖，加到[]中
return (
<div>
<p>父组件A</p>
<button>点击</button>
<Child test={test} />
</div>
);
}
import { memo } from “react”;
const B = (props) => {
const { test } = props;
return (
<div
onClick={() => {
test();
}}
>
子组件B
</div>
);
};
export default memo(B);
场景三：A组件有两个state：sa，sb，sb是依据sa计算出来的，当然你可以分别给他们创建useState，但是最佳的方式是，使用useMemo，当sa变化的时候计算出sb的值
import { memo, useState } from “react”;
const [sa, setSa] = useState(“”);
const sb = useMemo(() => {
return sa + “，小明”;
}, [sa]);
useEffect(() => {
setSa(“你好”);
return () => {
second;
};
}, [third]);
const B = (props) => {
const { test } = props;
return (
<div
onClick={() => {
test();
}}
>
子组件B
</div>
);
};
export default memo(B);
以上就是useCallback与useMemo与memo到底怎么用的全部内容，欢迎大家一起讨论
近期评论