react 基础(useCallback)

useCallback 作用,主要用于缓存函数的。

js 复制代码
import { FC, useCallback, useMemo, useState } from 'react';


const UserCallback: FC = () => {
    
    const [text, setText] = useState('hello')
    const fn1 = () => {
        console.log('fn1')
    }
    const fn2 = useCallback(() => {
        console.log('fn2 text', text)
    }, [text])
    return <>
        <div>
            <button onClick={fn1}> fn1</button> 
            <div>
                <button onClick={fn2}> fn2</button>
            </div>
            {text}
            <div>
                <input type="text" value={text} onChange={e => setText(e.target.value) } />
            </div>
        </div>
    </>
}

export default UserCallback;
相关推荐
晚星star10 分钟前
在 Web 前端实现流式 TTS 播放
前端·vue.js
huabuyu10 分钟前
基于 Taro 的 Markdown AST 渲染器实现
前端
薄雾晚晴10 分钟前
Rspack 性能优化实战:JS/CSS 压缩 + 代码分割,让产物体积直降 40%
前端·javascript
本末倒置18311 分钟前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
狗头大军之江苏分军32 分钟前
Meta万人裁员亲历者自述:小扎尝到了降本的甜头
前端·后端·github
秃顶老男孩.36 分钟前
web中的循环遍历
开发语言·前端·javascript
龙在天1 小时前
vue 请求接口快慢 覆盖 解决方案
前端
跟橙姐学代码1 小时前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_1 小时前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou1371 小时前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js