写了这么长时间的react组件库，里面用到到了许多的hooks，为了大家更加方便的阅读和理解博主的文档和代码，博主我整理了一下在写组件库中所用到的hooks.

useMemo

在vue的使用中，我们可以使用computed来进行缓存，但是，在react中，没有computed这个计算属性，怎么办呢，不要着急，虽然没有computed，但是在react中，有一个hooks和

computed计算属性有同等的作用。接下来，让我们一起来康康useMemo的用法吧。

语法：

const memoizedValue = useMemo(callback, dependencies)

其中，callback 是一个函数，用于计算和返回需要记忆的值，dependencies 是一个数组，表示依赖项。当依赖项发生变化时，callback 函数会重新执行以计算新的值。

useMemo 的作用是在依赖项发生变化时，仅在需要时重新计算值，并且将之前计算的值缓存起来，避免不必要的重复计算。

使用场景：

优化某些昂贵的计算或者是处理大量数据的操作

不使用useMemo时

import {useState} from "react";
const Test = () => {
    const [name, setName] = useState('张三')
    const [age, setAge] = useState(18)
    return (<div>
        <h3>useMemo的用</h3>
        姓名：<input type="text" value={name} onChange={(e) => setName(e.target.value)}/>
        年龄：<input type="text" value={age} onChange={(e) => setAge(e.target.value * 1)}/>
        <br/>
        my name is ${name},随机数为${Math.random()}
    </div>)
}
export default Test

使用useMemo时

import {useState, useMemo} from "react";
const Test = () => {
    const [name, setName] = useState('张三')
    const [age, setAge] = useState(18)
    const newName = useMemo(() => {
        return `my name is ${name},随机数为${Math.random()}`
    }, [name])
    return (<div>
        <h3>useMemo的用</h3>
        姓名：<input type="text" value={name} onChange={(e) => setName(e.target.value)}/>
        年龄：<input type="text" value={age} onChange={(e) => setAge(e.target.value * 1)}/>
        <br/>
        {newName}
    </div>)
}
export default Test

可以看到，在没有使用useMemo时，无论是name发生变化，还是age发生变化，随机数都会更新（也就是随机数发生了变化），使用了useMemo之后，可以指定更新的依赖，如上所示，只有当name发生变化时，随机数才会进行更新。

good  luck !