React中useCallback useMemo到底该怎么用
碰磕 人气:0useCallback记忆函数
前言
使用缘由:
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用
类似监听器…监听更新然后执行操作
介绍
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用
使用
/** * 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>; }
加载全部内容