react 基础用法(useMemo)

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依赖。

相关推荐
excel15 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel16 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼17 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping17 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙18 小时前
[译] Composition in CSS
前端·css
白水清风18 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix19 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780019 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端19 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧19 小时前
Promise 的使用
前端·javascript