React 中的 useMemo 和 useCallback

1. useMemo语法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), deps);

1. 传入一个函数进去，会返回一个 memoized 值，需要注意的是，函数内必须有返回值；

2. 第二个参数会依赖值，当依赖值更新时，会从新计算；

2. useMemo优化示例

我们定义了一个total1函数，内部对一个数组进行求和，通过 reduce 计算总和，经过测试发现点击按钮后，只会执行 total1 ，不会执行 total2，假设total2计算量巨大，就会造成内存的浪费，通过 useMemo 可以帮我们缓存计算值。

import {useMemo, useState } from "react"

function App() {
    const [count,setCount] = useState(0);
    //  正常的计算方法
    const total1 = ()=>{
        // 页面渲染时会重新输出
        console.log('total1......');
        const list = [1,3,5,7,9];
        // 数组求和
        return list.reduce((prev,current)=>prev+current,0)
    };

    // 加了缓存的计算
    const total2 = useMemo(()=>{
        // 页面重新渲不会再次输出
        console.log('total2......');
        const list = [1,3,5,7,9];
        // 数组求和
        return list.reduce((prev,current)=>prev+current,0)

    },[]);

    // 点击按钮测试输出
    const hindleClick = ()=>{
        setCount(count+1);
    };
	return (
		<div>
            <p>Count:{count}</p>
            <button onClick={hindleClick}>按钮</button>
            <p>Total1:{total1()}</p>
            <p>Total2:{total2}</p>
        </div>
	)
}


export default App

3. useCallback语法

useCallback(callback, deps)

1. useCallback 接收 2 个参数，第一个为缓存的函数，第二个为依赖值；

2. 主要用于缓存函数，第二次会返回同样的结果；

4. useCallback优化示例

定义一个子组件在父组件中调用，当父组件更新重新渲染时，子组件也会重新渲染。然后我们对子组件加了memo对传入的参数进行检测，同时对传入子组件的方法使用useCallback进行缓存，这样当父组件在更新时，缓存的方法没有发生变化，子组件通过memo发现传入的方法没有发生改变，也就不会重新渲染，以此提高了性能。

import {memo,useCallback,useState } from "react"
function App() {
    const [count,setCount] = useState(0);
    // 父组件点击更新
    const hindleClick = ()=>{
        setCount(count+1);
    };
    // 缓存点击方法
    const handleChildClick = useCallback(()=>{
        console.log("子节点点击了")
    },[]);
    return (
        <div>
            <p>Count:{count}</p>
            <button onClick={hindleClick}>按钮</button>
            <Child onClick={handleChildClick}></Child>
        </div>
    )
}

// 检测传入的方法是否发生变化
const Child = memo(({onClick}:any)=>{
    console.log('child......')
    return <div>我是子节点<button onClick={onClick}></button></div>
})

export default App

5. useMemo和useCallback的区别

他们都用于缓存，useCallback 主要用于缓存函数，返回一个缓存后的函数，而 useMemo 主要用于缓存值，返回一个缓存后的值。