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

相关推荐
前端开发与ui设计的老司机18 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人20 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css