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;
相关推荐
程序员阿超的博客31 分钟前
React动态渲染:如何用map循环渲染一个列表(List)
前端·react.js·前端框架
magic 24533 分钟前
模拟 AJAX 提交 form 表单及请求头设置详解
前端·javascript·ajax
小小小小宇5 小时前
前端 Service Worker
前端
只喜欢赚钱的棉花没有糖6 小时前
http的缓存问题
前端·javascript·http
小小小小宇6 小时前
请求竞态问题统一封装
前端
loriloy6 小时前
前端资源帖
前端
源码超级联盟6 小时前
display的block和inline-block有什么区别
前端
GISer_Jing6 小时前
前端构建工具(Webpack\Vite\esbuild\Rspack)拆包能力深度解析
前端·webpack·node.js
让梦想疯狂6 小时前
开源、免费、美观的 Vue 后台管理系统模板
前端·javascript·vue.js
海云前端7 小时前
前端写简历有个很大的误区,就是夸张自己做过的东西。
前端