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;
相关推荐
Codebee10 小时前
Harness Engineering:AICode 的灵魂
前端·人工智能·前端框架
Highcharts.js11 小时前
线形比赛积分增长或竞赛图|Highcharts企业图表代码示列
开发语言·前端·javascript·折线图·highcharts·竞赛图
hpysirius11 小时前
在企业搭建一套完整的AI Agent系统
前端
追逐梦想永不停11 小时前
记录一个好用的excel判断数字格式的公式
前端·chrome·excel
hpysirius11 小时前
从零构建 Web 端视频剪辑器:技术实践与思考
前端
让学习成为一种生活方式11 小时前
大肠杆菌合成扑热息痛--对乙酰氨基酚--文献精读227
开发语言·前端·javascript
李白的天不白11 小时前
请求不到百度网址的原因
前端
Gary Studio11 小时前
Selinux编写
linux·服务器·前端
网络点点滴11 小时前
NPM的包版本管理
前端·npm·node.js
光影少年11 小时前
react性能优化比较好的办法有哪些?
前端·react.js·性能优化