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;
相关推荐
老大白菜10 分钟前
在 Ubuntu 中使用 FastAPI 创建一个简单的 Web 应用程序
前端·ubuntu·fastapi
渔阳节度使19 分钟前
React
前端·react.js·前端框架
LCG元2 小时前
Vue.js组件开发-如何实现异步组件
前端·javascript·vue.js
Lorcian2 小时前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code
问道飞鱼2 小时前
【前端知识】常用CSS样式举例
前端·css
wl85112 小时前
vue入门到实战 三
前端·javascript·vue.js
ljz20163 小时前
本地搭建deepseek-r1
前端·javascript·vue.js
爱是小小的癌3 小时前
Java-数据结构-优先级队列(堆)
java·前端·数据结构
傻小胖3 小时前
vue3中Teleport的用法以及使用场景
前端·javascript·vue.js
wl85114 小时前
Vue 入门到实战 七
前端·javascript·vue.js