React82_useCallback()

为什么需要useCallback?

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

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

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

使用useCallback

1. 参数:

        ① 回调函数

        ② 依赖数组

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

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

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

问题

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

React82_useCallback()_第1张图片

 原因在于setCount

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

你可能感兴趣的:(前端)