当前位置: 首页 > article >正文

react 之 useCallback

简单讲述下useCallback的使用方法,useCallback也是用来缓存的,只不过是用于做函数缓存
在这里插入图片描述

// useCallback

import { memo, useCallback, useState } from "react"


const Input = memo(function Input ({ onChange }) {
  console.log('子组件重新渲染了')
  return <input type="text" onChange={(e) => onChange(e.target.value)} />
})

function App () {
  // 传给子组件的函数
  const changeHandler = useCallback((value) => console.log(value), [])
  // 触发父组件重新渲染的函数
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      {/* 把函数作为prop传给子组件 */}
      <Input onChange={changeHandler} />
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}

export default App


http://www.kler.cn/a/226917.html

相关文章:

  • Kafka常见生产问题详解
  • .locked.locked1勒索病毒爆发:如何有效保护和恢复您的文件
  • AVL树
  • 微信小程序(三十三)promise异步写法
  • 系统添加多版本支持
  • ASP.NET Core 自定义解压缩提供程序
  • 两个重要极限【高数笔记】
  • Java面试——计网篇
  • 假期刷题打卡--Day22
  • svg基础(一)
  • 微信小程序(三十一)本地同步存储API
  • Android battery saver 简单记录
  • GrayLog踩坑历险记
  • 微信小程序实现吸顶、网格、瀑布流布局
  • C++初阶 内存管理和模板
  • WordPress可以做企业官网吗?如何用wordpress建公司网站?
  • [Python] opencv - 什么是直方图?如何绘制图像的直方图?
  • 2021-07-02 51单片机按键控制LED灯逐个点亮
  • Unity_Shader
  • STC系列单片机定时器