react 之 useCallback

简单讲述下useCallback的使用方法,useCallback也是用来缓存的,只不过是用于做函数缓存

javascript 复制代码
// 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
相关推荐
ONE_Gua几秒前
Wireshark常用过滤规则
前端·后端·数据挖掘
enki081511 分钟前
【CANN训练营】+开源之星+GitCode算子开发环境快速搭建手册
javascript·ecmascript·jquery
通往曙光的路上15 分钟前
vue啊哈哈哈哈哈哈哈哈
前端·javascript·vue.js
fouryears_2341719 分钟前
如何将Vue 项目转换为 Android App(使用Capacitor)
android·前端·vue.js
葡萄城技术团队23 分钟前
在线Excel新突破:SpreadJS如何完美驾驭中国式复杂报表
前端
muchan9225 分钟前
这会不会引起编程范式的变革?
前端·后端·编程语言
进阶的鱼30 分钟前
React+ts+vite脚手架搭建(四)【mock篇】
前端·javascript·react.js
Jagger_34 分钟前
Scrum敏捷开发流程规范
前端·后端
Value_Think_Power36 分钟前
变量->约束->目标
前端
开源框架37 分钟前
招商银行模拟器app,网银模拟生成器,jar+c++组合模板
前端