react 基础用法（useMemo）

前端一课2023-11-02 20:32

useMemo这个hooks在react中具有缓存的作用，其表现形式与vue中的计算属性有点类似，可以使用这个hooks 来优化前端性能

使用方法为

js 复制代码

import { FC, useMemo, useState } from 'react';


const UseMemo: FC = () => {
    const [num1, setNum1] = useState(10)
    const [num2, setNum2] = useState(20)
    const [text, setText] = useState('hello')
    console.log(' add text')
    const sum = useMemo(() => {
        console.log('add sum')
        return num1 + num2
    },[num1, num2])
    return <div>
        <p>{sum}</p>
        <p>
            {num1} <button onClick={() => setNum1(num1 + 1)}> add num1 </button>
        </p>
        <p>
            {num2} <button onClick={() => setNum2(num2 + 1)}> add num2 </button>
        </p>
        <div>
            <input onChange={ e => setText(e.target.value)} value={text} type="text" />
        </div>
    </div>
}

export default UseMemo;

当我点击add num1 的时候 console.log(' add text') 和 console.log('add sun') 均会执行，其表现的形式就是 sum 依赖于num1 和 num2 这两个值如果发生变化，则sum 方法就会执行console.log('add sum') 就会打印，而state 的变化会导致组件发生更新所以 console.log(' add text') 也会执行。那么当我在输入框中输入值的时候，这个时候也就是text 发生变化console.log('add sum') 不会执行，就是text 不被sum依赖。