1.什么是useMemo Hook?

useMemo用于優(yōu)化代碼, 可以讓對應(yīng)的函數(shù)只有在依賴發(fā)生變化時才返回新的值
useMemo和useCallback很像，useCallback只要組件不發(fā)生變化，那么指定依賴的函數(shù)返回的永遠(yuǎn)都是同一個函數(shù)，而useMemo只要指定的變量不發(fā)生變化，則返回的永遠(yuǎn)是同一個值

    // 以下代碼的作用: 只要countState沒有發(fā)生變化, 那么useMemo返回的永遠(yuǎn)都是同一個值
    const decrement = useMemo(()=>{
        return ()=>{
            setCountState(countState - 1);
        };
    }, [countState]);

useCallback的實(shí)現(xiàn)原理其實(shí)就是通過useMemo來實(shí)現(xiàn)的

    // 以下代碼的作用: 只要countState沒有發(fā)生變化, 那么useCallback返回的永遠(yuǎn)都是同一個函數(shù)
    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區(qū)別:

• useCallback返回的永遠(yuǎn)是一個函數(shù)
• useMemo返回的是return返回的內(nèi)容