memo、 useMemo 和 useCallback语法讲解

memo、 useMemo 和 useCallback

+缓存组件, 对组件浅比较 (只有组件的props, (对函数,引用要用useCallback包裹)发生变化
+缓存值, 依赖项变化，会从新计算。
+缓存函数, 依赖项变化,重新生成新函数

useMemo 语法

对返回的值缓存进行优化


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

传入一个函数进去，会返回一个 memoized 值(会记忆的值)，需要注意的是，函数内必须有返回值
第二个参数会依赖值，

类似于computed实时计算

useMemo 优化

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

function App(){    console.log('Demo1 Parent')    let [count,setCount] = useState(0)    const handleClick = ()=>{        setCount(count+1)    }    const total1 = ()=>{        console.log('计算求和1')        let arr = Array.from({ length:100 }).fill(1)        return arr.reduce((prev,next)=>prev+next,0)    }    // 缓存对象值    const total2 = useMemo(()=>{        console.log('计算求和2')        let arr = Array.from({ length:100 }).fill(1)        return arr.reduce((prev,next)=>prev+next,0)    },[count]) return (        <div>            <div>                <label>Count：{count}</label>             <button onClick={handleClick}>Increase</button>            </div>            <div>                <label>总和：</label>                <span>{total1()}</span>                <span>{total2}</span>            </div>        </div>    )
}

useCallback 语法

对函数缓存进行优化

useCallback(callback, deps)

useCallback 接收 2 个参数，第一个为缓存的函数，第二个为依赖值
主要用于缓存函数，第二次会返回同样的结果。

useCallback 优化

import { memo, useCallback, useState } from 'react'function App() {const [count, setCount] = useState(0)const handleClick = useCallback(() => {console.log('子节点点击...')}, [])return (<div className='App'><p>欢迎学习React后台课程</p><p><span>Count: {count}</span><buttononClick={() => {setCount(count + 1)}}>按钮</button></p><Child handleClick={handleClick} /></div>)
}const Child = memo(function Child(props: any) {console.log('child...')return (<p>我是子节点 <button onClick={props.handleClick}>按钮</button></p>)
})