React中useCallback useMemo到底该怎么用
作者：碰磕
在React函数组件中，当组件中的props发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改values/props的函数/组件。在react中，我们可以通过memo，useMemo以及useCallback来防止子组件的rerender
useCallback记忆函数
前言
使用缘由：
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用
类似监听器…监听更新然后执行操作
介绍
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用
使用
/**
* 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会执行第一个函数并且将函数执行结果返回给你
- 类似监听器…监听更新然后执行操作
使用
/**
* 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！