useCallback记忆函数
前言
使用缘由：
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用
类似监听器…监听更新然后执行操作
介绍
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用
使用
import React, { useState, useCallback, useEffect } from 'react';
const set = new Set();
export default function Parent() {
const [count, setCount] = useState(1);
const callback = useCallback(() => {
console.log(count);
return count
}, [count]); //count更新时执行
return (
<div>
<h4>parent count:{count}</h4>
<div>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
<Child callback={callback} />
</div>
)
}
const Child = ({callback}) =>{
const [count,setCount] = useState(0);
useEffect(()=>{
setCount(callback())
},[callback]) //当callback更新时执行callback函数，得到parent组件最新的count
return <child>
count:{count}
</child>
} useMemo记忆组件
两者区别
与useCallback的区别
- useCallback不会执行第一个参数函数,而是将它返回给你，而useMemo会执行第一个函数并且将函数执行结果返回给你
- 类似监听器…监听更新然后执行操作
使用
import React, { useState, useMemo } from 'react';
export default function Memos() {
const [count, setCount] = useState(1);
const memo = useMemo(() => {
console.log("count更新了"+count);
return count
}, [count]); //count更新时执行
return <div>
<h4>{count}</h4>
<div>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
</div>;
}
到此这篇关于React中useCallback useMemo到底该怎么用的文章就介绍到这了,更多相关React useCallback与useMemo内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
