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;
相关推荐
晴殇i13 分钟前
DOM嵌套关系全解析:前端必备的4大判断方法与性能优化实战
前端·javascript·面试
似水流年_zyh23 分钟前
canvas涂抹,擦除功能组件
前端
胖虎26525 分钟前
前端多文件上传核心功能实现:格式支持、批量上传与状态可视化
前端
胖虎26527 分钟前
Vue2 项目常用配置合集:多语言、SVG 图标、代码格式化、权限指令 + 主题切换
前端
一键定乾坤31 分钟前
npm 源修改
前端
parade岁月32 分钟前
Vue 3 响应式陷阱:对象引用丢失导致的数据更新失效
前端
掘金安东尼34 分钟前
GPT-6 会带来科学革命?奥特曼最新设想:AI CEO、便宜医疗与全新计算机
前端·vue.js·github
申阳38 分钟前
Day 5:03. 基于Nuxt开发博客项目-页面结构组织
前端·后端·程序员
全马必破三1 小时前
React的设计理念与核心特性
前端·react.js·前端框架
ttod_qzstudio1 小时前
替代 TDesign Dialog:用 div 实现可拖拽、遮罩屏蔽的对话框
前端·tdesign