[Day10] [笔记]React Hooks-useMemo、useCallback

前言

我们昨天介绍了 Hooks 中比较常用的 UseState 跟 UseEffect，那我们今天继续接着介绍另外一种类型的 Hooks - Memorized Hook

Memorized Hook

适用时机：

不需要常常被 render 的元件或 Function
执行速度慢的 Function

useMemo

两个参数，第一个接函式、第二个接 Dependency []，如果没有给依赖阵列每次都会重新 Render

会 Return 一个 memorized value

const Demo = () => {
    const [number, setnumber] = useState(0);
    // 两个参数，第一个接函式、第二个接 Dependency []，如果没有给依赖阵列每次都会重新 Render
    // 当第二个依赖阵列改变时， useMemo 才会重新 Render
    useMemo(() => { spendLongTimeFunction(number);}, [number])
}

useCallback

两个参数，第一个接函式、第二个接 Dependency []，如果没有给依赖阵列每次都会重新 Render

const Demo = () => {
    // useCallback 跟 useMemo差异在於可以 
    // useCallback 互叫时可以带参数如： callback(add)，其回传是整个函式 
    // useMemo 回传是函式的值
    const callback = useCallback((add) => {
        spendLongTimeFunction(number+ add);
    },[number])
}