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