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;
相关推荐
Yanni4Night几秒前
JavaScript打包器大奖赛:谁是构建速度之王? 🚀
前端·javascript
默海笑14 分钟前
VUE后台管理系统:项目架构之搭建Layout架构解决方案与实现
前端·javascript·vue.js
咸鱼加辣15 分钟前
【前端脚手架】node
前端
温宇飞17 分钟前
WebGL 的渲染管道和编程接口
前端·webgl
帅的被人砍xxx22 分钟前
【vue演练场安装 element-plus框架】
前端
麦麦大数据37 分钟前
F051-vue+flask企业债务舆情风险预测分析系统
前端·vue.js·人工智能·flask·知识图谱·企业信息·债务分析
1024肥宅39 分钟前
现代 JavaScript 特性:ES6+ 新特性深度解析与实践
前端·javascript·面试
速易达网络1 小时前
基于Java Servlet的用户登录系统设计与实现
java·前端·mvc
晨光32111 小时前
Day34 模块与包的导入
java·前端·python
BD_Marathon1 小时前
Vue3_关于CSS样式的导入方式
前端·css