网站宣传页面模板,宝安做网站信科,大网站建设规范,深圳龙华大浪做网站公司react useCallback与useMemo函数使用与常见问题
useCallback返回一个可记忆的函数#xff0c;useMemo返回一个可记忆的值#xff0c;useCallback只是useMemo的一种特殊形式。
那么这到底是什么意思呢#xff1f;实际上我们在父子通信的时候#xff0c;有可能传递的值是一…react useCallback与useMemo函数使用与常见问题
useCallback返回一个可记忆的函数useMemo返回一个可记忆的值useCallback只是useMemo的一种特殊形式。
那么这到底是什么意思呢实际上我们在父子通信的时候有可能传递的值是一样的但是传递的内存地址可能是不一样的那么在React眼里是会对组件进行重新执行的。
一般对象类型的值都是具备内存地址的所以值相同但内存地址可能不同举例如下
let Welcome (props) { const [ count, setCount ] useState(0);const handleClick () {setCount(count1);}const foo () {}return (divbutton onClick{handleClick}点击/buttonhello WelcomeHead bar{bar} //div);
}当点击按钮的时候组件会进行重新渲染因为每次重新触发组件的时候后会重新生成一个新的内存地址的foo函数。
那么如何不让foo函数重新生成使用之前的函数地址呢因为这样做可以减少子组件的渲染从而提升性能。可以通过useCallback来实现。
const foo useCallback(() {}, [])等价
const foo useMemo(() (){}, []) // 针对函数而有时候这种需要不一定都是函数比如数组的情况下我们就需要用到useMemo这个钩子函数了useMemo更加强大其实useCallback是useMemo的一种特殊形式而已。
const foo useMemo(() (){}, []) // 针对函数
const bar useMemo(() [1,2,3], []) // 针对数组这里我们还要注意第二个参数是一个数组这个数组可以作为依赖项存在也就是说当依赖项发生值的改变的时候那么对应的对象就会重新创建。
const foo useMemo(() (){}, [count]) // 当count改变时函数重新创建
