使用缘由:
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用
类似监听器…监听更新然后执行操作
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用
/** * 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> }
与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>; }