React中useCallback useMemo到底该怎么用
更新时间:2023年02月06日 14:55:43 作者:碰磕
在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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React18使用Echarts和MUI实现一个交互性的温度计
这篇文章我们将结合使用React 18、Echarts和MUI(Material-UI)库,展示如何实现一个交互性的温度计,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
React Hooks - useContetx和useReducer的使用实例详解
这篇文章主要介绍了React Hooks - useContetx和useReducer的基本使用,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11
react 页面加载完成后自动执行标签的点击事件的两种操作方法
这篇文章主要介绍了react 页面加载完成后自动执行标签的点击事件,本文给大家分享两种操作方法结合示例代码给大家讲解的非常详细,需要的朋友可以参考下2022-12-12


最新评论