React学习笔记17

useMemo

作用：在组件每次重新渲染的时候缓存计算的结果

基础语法：

useMemo(()=>{
    //根据count1返回计算的结果
},[count1])

说明：使用useMemo做缓存之后可以保证之后count1依赖项发生变化时才会重新计算

以需求记忆Hook函数：实现一个斐波那契数列

function fib(n) {
    if (n < 3) return 1
    return fib(n - 1) + fib(n - 1)
}

function AddComponents() {
    const [count1, setCount1] = useState(0)
    const [count2, setCount2] = useState(0)
    const res =useMemo(()=>{
       return fib(count1)
    },[count1]) 
    return (
        <div className="add_components">
            <div>{res}</div>
            <button onClick={() => { setCount1(count1 + 1) }}>change count1:{count1}</button>
            <button onClick={() => { setCount2(count2 + 1) }}>change count2:{count2}</button>
        </div>
    )
}

使用场景：消耗非常大的计算才有可能用useMemo