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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
使用useImperativeHandle时父组件第一次没拿到子组件的问题
这篇文章主要介绍了使用useImperativeHandle时父组件第一次没拿到子组件的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08React tabIndex使非表单元素支持focus和blur事件
这篇文章主要为大家介绍了React使用tabIndex使非表单元素支持focus和blur事件实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-11-11
最新评论