亲宝软件园·资讯

展开

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

Kobe_G 人气:0

一、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导致的不必要渲染

总结

加载全部内容

相关教程
猜你喜欢
用户评论