react组件memo useMemo useCallback使用区别示例
作者：SODA_HA
这篇文章主要为大家介绍了react组件memo useMemo useCallback使用区别的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
正文
memo用来优化函数组件的重复渲染行为，针对的是一个组件
useMemo返回一个memoized的值
本质都是用同样的算法来判定依赖是否发生改变，继而决定是否触发memo或者useMemo中的逻辑，利用memo就可以避免不必要的重复计算，减少资源浪费
useCallback返回一个memoized的函数
useMemo和useCallback都接收两个参数，第一个参数为fn，第二个参数为[]，数组中是变化依赖的参数 memo则可以直接作用于组件，例如
export default memo(Mycomponent)
useMemo和useEffect的执行时机是不一致的：useEffect执行的是副作用，所以一定是在渲染之后执行的，useMemo是需要有返回值的，而返回值可以直接参与渲染的，所以useMemo是在渲染期间完成的
memo使用
// 父组件
const Parent = ()=>{
const [count, setCount] = useState(1)
const addCount = ()=>{
setCount(count + 1)
}
return(
<>
<div onClick={addCount}>计数: {count}</div>
<Child />
</>
)
}
// 子组件
const Child = memo(()=>{
console.log('child start---')
return(
<div>child...</div>
)
})
// 使用memo后，子组件的props或者state没有变化时，将不会对子组件进行渲染
useMemo使用
const sum = ()=>{
return a+b
}
const result = useMemo(()=>{sum()},[a,b])
// 只有在a或者b的值变化时才会触发sum函数执行
useCallback使用
// 父组件，给子组件传递name和changeName方法
const Parent = () => {
const [count, setCount] = useState(1);
const [name, setName] = useState("bbz");
const addCount = () => {
setCount(count + 1);
};
const changeName = useCallback((n) => {
setName(n);
}, []);
return (
<>
<div onClick={addCount}>计数: {count}</div>
<Child name={name} changeName={changeName} />
</>
);
};
// 子组件
const Child = ({ name, changeName }) => {
console.log("child start---");
return (
<div
onClick={() => {
changeName("bobozai");
}}
>
child comps: {name}
</div>
);
};
// 如果不使用useCallback,则点击父组件计数的同时，子组件会console进行渲染，
// 因为更新count时父组件会重新渲染，导致重新生成了一个changeName函数，
// 所以子组件的props变了，导致子组件会重新渲染
// 而对changeName函数用useCallback进行包裹，则对函数进行缓存不会重新生成以上就是react组件memo useMemo useCallback使用区别的详细内容，更多关于react组件memo useMemo useCallback的资料请关注脚本之家其它相关文章！