一文带你搞懂useCallback的使用方法

 更新时间:2023年02月07日 11:56:41   作者:Kobe_G  
useCallback是用来帮忙缓存函数的,当依赖项没有发生变化时,返回缓存的指针,而props涉及到复杂对象类型都是通过指针来传递到,下面这篇文章主要给大家介绍了关于useCallback使用的相关资料,需要的朋友可以参考下

一、useCallback的作用

usecallback不是用来解决组件中有过多内部函数导致的性能问题:

1.我们要知道,js创建一个函数的成本是非常小的,这点计算对于计算机来说是小case

2.其实使用useCallback会产成额外的性能:对deps的判断

3.其实每次组件重新渲染时,都无所谓避免重新创建内部函数,因为即使useCallback的deps没有变,它也会重新创建内部函数作为useCallback的实参

那么,它的作用到底是什么?useCallback的作用其实是用来避免子组件不必要的reRender:

首先,假如我们不使用useCallback,在父组件中创建了一个名为handleClick的事件处理函数,根据需求我们需要把这个handleClick传给子组件,当父组件中的一些state变化后(这些state跟子组件没有关系),父组件会reRender,然后会重新创建名为handleClick函数实例,并传给子组件,这时即使用React.memo把子组件包裹起来,子组件也会重新渲染,因为props已经变化了,但这个渲染是无意义的

如何优化呢?这时候就可以用useCallback了,我们用useCallback把函数包起来之后,在父组件中只有当deps变化的时候,才会创建新的handleClick实例,子组件才会跟着reRender(注意,必须要用React.memo把子组件包起来才有用,否则子组件还是会reRender。React.memo是类似于class组件中的Pure.Component的作用)

对于这种deps不是经常变化的情况,我们用useCallback和React.memo的方式可以很好地避免子组件无效的reRender。但其实社区中对这个useCallback的使用也有争议,比如子组件中只是渲染了几个div,没有其他的大量计算,而浏览器去重新渲染几个dom的性能损耗其实也是非常小的,我们花了这么大的劲,使用了useCallback和React.memo,换来的收益很小,所以一些人认为就不用useCallback,就让浏览器去重新渲染好了。至于到底用不用,此处不深入讨论,我的建议是当子组件中的dom数量很多,或者有一些大量的计算操作,是可以进行这样的优化的。

以上都是讨论的deps不会经常改变的情况的优化,而很多时候useCallback中的deps数组中的变量是会经常改变的,这个时候我们用useCallback已经没啥意义了,反而会造成性能损耗(deps判断)。有没有什么办法可以让子组件不重新渲染,也能拿到父组件中handleClick函数中的最新state值呢?下面我们讨论useRef,useReducer,usePersistFn这三种解决方法

二、useRef解决方案

为了让子组件不进行reRender,我们必须保证

1.父组件不会重新创建handleClick函数实例

2.handleClick函数能拿到最新的state

使用useRef

const [text, setText] = useState('Initial value');
const textRef = useRef(text);
const handleClick= useCallback(() => {
     console.log(textRef.current);
 }, []); 

 useEffect(() => {
     console.log('update text')
     textRef.current = text;
 }, [text])

textRef在每次reRender时不会改变,这样我们把handleClick传给子组件,handleClick函数中每次都能拿到父组件中最新的state

三、useReducer解决方案

使用useReducer

function reducer(state, action) {
    switch(action.type) {
        case 'update':
            return action.preload;
        case 'childComponent':
            // 要执行的函数  
            return state;     
    }
}
export default function Index() { // 父组件
    const [state, dispatch] = useReducer(reducer, 'Initial value');

    return (
        <>
            <input value={state} onChange={(e) => dispatch({
                type: 'update', 
                preload: e.target.value
            })} />
            <ChildComponent dispatch={dispatch} />
        </>
    )
}

//在 ChildComponent中,拿到dispatch,通过dispatch({type: 'childComponent' })的方式调用

dispatch自带memoize,所以子组件不会进行 re-render

四、usePersistFn解决方案

usePersistFn是aooks库中的一个钩子函数,它接收一个函数,返回一个永远不变的函数引用,在这个函数中每次都能拿到最新的state值,看看usePersistFn的源码:

function usePersistFn(fn) {
  const fnRef = useRef(fn);
  fnRef.current = fn;

  const persistFn = useRef();
  if (!persistFn.current) {
    persistFn.current = function (...args) {
      return fnRef.current.apply(this, args);
    };
  }

  return persistFn.crrent;
}

这里它用了两个useRef,保证返回的函数引用不变,并且每次函数内部能拿到最新的state。

这里可以用useRef和useCallback到达同样的效果:

function usePersistFn(fn) {
  const fnRef = useRef();
  fnRef.current = fn; 
	
  const persist= useCallback((...rest) => {
     return fnRef.current(...rest);
  }, []);
  
  return persist
}

这种方法和上面的useRef解决方案差不多,只是封装了起来而已

另外,本文介绍一下useContext使用的问题和优化:

问题:当context中的值改变时,只要使用useContext订阅了context的组件,不管该组件用到的state改不改变,该组件都会reRender,此时用React.memo是没有办法优化的。

优化:

1.拆分context,把经常改变的数据和不经常改变的数据拆分开,在只使用稳定数据的组件中,我们只使用stableContext

2.使用useMemo

const {state}= useContext(AppContext);
return useMemo(() => <span>data:{state.depData}</span>, [state.depData]);

3.如何有效减少使用useContext导致的不必要渲染

总结

到此这篇关于useCallback使用的文章就介绍到这了,更多相关useCallback使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react循环数据(列表)的实现

    react循环数据(列表)的实现

    这篇文章主要介绍了react循环数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • react native带索引的城市列表组件的实例代码

    react native带索引的城市列表组件的实例代码

    本篇文章主要介绍了react-native城市列表组件的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • react路由配置方式详解

    react路由配置方式详解

    本篇文章主要介绍了react路由配置方式详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React BootStrap用户体验框架快速上手

    React BootStrap用户体验框架快速上手

    这篇文章主要介绍了React BootStrap用户体验框架快速上手的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • 解决React报错Functions are not valid as a React child

    解决React报错Functions are not valid as 

    这篇文章主要为大家介绍了React报错Functions are not valid as a React child解决详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React如何通过@craco/craco代理接口

    React如何通过@craco/craco代理接口

    这篇文章主要介绍了React如何通过@craco/craco代理接口问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • React Hooks项目实战

    React Hooks项目实战

    React Hooks是React 16.8版本引入的新特性,它使得在函数组件中也能够使用状态(state)和其他React特性,本文就来详细介绍一下React Hooks项目实战,感兴趣的可以了解一下
    2023-11-11
  • useEffect中return函数的作用和执行时机解读

    useEffect中return函数的作用和执行时机解读

    这篇文章主要介绍了useEffect中return函数的作用和执行时机,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • react  Suspense工作原理解析

    react  Suspense工作原理解析

    这篇文章主要为大家介绍了react  Suspense工作原理解析以及基本应用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • ReactiveCocoa代码实践之-UI组件的RAC信号操作

    ReactiveCocoa代码实践之-UI组件的RAC信号操作

    这篇文章主要介绍了ReactiveCocoa代码实践之-UI组件的RAC信号操作 的相关资料,需要的朋友可以参考下
    2016-04-04

最新评论