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;
相关推荐
安冬的码畜日常1 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
小白学习日记2 小时前
【复习】HTML常用标签<table>
前端·html
丁总学Java2 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele2 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
懒羊羊大王呀3 小时前
CSS——属性值计算
前端·css
DOKE3 小时前
VSCode终端:提升命令行使用体验
前端
xgq3 小时前
使用File System Access API 直接读写本地文件
前端·javascript·面试
用户3157476081353 小时前
前端之路-了解原型和原型链
前端
永远不打烊3 小时前
librtmp 原生API做直播推流
前端