React-Hooks之useMemo

1.什么是useMemo Hook?

useMemo用于优化代码, 可以让对应的函数只有在依赖发生变化时才返回新的值
useMemo和useCallback很像，useCallback只要组件不发生变化，那么指定依赖的函数返回的永远都是同一个函数，而useMemo只要指定的变量不发生变化，则返回的永远是同一个值

    // 以下代码的作用: 只要countState没有发生变化, 那么useMemo返回的永远都是同一个值
    const decrement = useMemo(()=>{
        return ()=>{
            setCountState(countState - 1);
        };
    }, [countState]);

useCallback的实现原理其实就是通过useMemo来实现的

    // 以下代码的作用: 只要countState没有发生变化, 那么useCallback返回的永远都是同一个函数
    function useCallback(fn, arr){
        return useMemo(()=>{
            return fn;
        }, arr);
    }

    return (
        <div>
            <p>numState = {numState}</p>
            <p>countState = {countState}</p>
            <MemoHome handler={increment}/>
            <MemoAbout handler={decrement}/>
        </div>
    )

useCallback和useMemo区别:

• useCallback返回的永远是一个函数
• useMemo返回的是return返回的内容