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

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

最新评论