一文带你搞懂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]);
总结
加载全部内容