React82_useCallback()

为什么需要useCallback?

接上次讲到的memo,如果说将增加数量的函数从App组件传到A组件,A组件调用此函数来改变App组件的状态,那么App组件将会重新渲染。重新渲染意味着所有的函数和组件将会被重新的创建。因此,会观察到,每次点击按钮都会在控制台显示->        App组件渲染,A组件渲染 

那么就需要useCallback来缓存这个函数,不至于每次数据更新,函数也要跟着重新创建。 

React.memo 和 React.useCallback 一定记得需要配对使用,缺了一个都可能导致性能不升反“降”,毕竟无意义的浅比较也是要消耗那么一点点点的性能。 

使用useCallback

1. 参数:

        ① 回调函数

        ② 依赖数组

                Ⅰ 依赖数组里面的数量发生变化,回调函数才会重新渲染

                Ⅱ 如果不指定依赖数组,回调函数每次都会渲染(跟不用的一样的效果,没有意义)

                Ⅲ 一定要将回调函数使用到的变量到添加到依赖数组里面,除了setState

问题

1. 为什么在useCallback定义的函数体里面使用外部的变量都会不改变,但是setState还是能将外面的改变?

 原因在于setCount

所以,必须把用的到的东西都放到依赖项里,以至于每次变量改变后,使得函数都会被重新创建。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值