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

React基础之useCallback

作用:在组件多次重现渲染的时候缓存函数

与memo类似,但是缓存的是函数

import { memo, useCallback, useMemo, useReducer, useState } from "react";

const Input=memo(function Input({onChange}){

  console.log('子组件重新渲染了');

  return <input type="text" onChange={(e)=>onChange(e.target.value)}></input>

})

function App() {

  //传给子组件的函数

  const changHandler=useCallback((value)=>console.log(value),[]);

  const [count,setCount]=useState(0)

  return (

    <div className="App">

        {/* 把函数作为prop传给子组件 */}

        <Input onChange={changHandler}/>

        <button onClick={()=>{setCount(count+1)}}>{count}</button>

    </div>

  );

}

export default App;


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

相关文章:

  • LeetCode刷题实战:删除字符串中的所有相邻重复项(栈的经典应用)
  • 2025-03-07 学习记录--C/C++-PTA 习题8-1 拆分实数的整数与小数部分
  • 哪些培训课程适合学习PostgreSQL中级认证知识?
  • CS144 Lab Checkpoint 6: building an IP router
  • 华为欧拉系统 Tomcat 安装详解
  • linux 内网下载 yum 依赖问题
  • ‌CentOS 7.9 安装 Docker 步骤
  • leetcode454 四数相加
  • flutter的debounce_throttle插件使用
  • 进程、线程、锁面试前复习(尽力局)
  • Myslq表的内外连接
  • Python项目-基于Django的在线教育平台开发
  • 【音视频】ffplay简单过滤器
  • 【算法】010、合并两个有序链表
  • 使用 display: flex 实现动态布局:每行两个 item,单数时最后一个占满整行
  • Redis数据结构——list
  • nacos和Eureka的学习
  • Core Speech Kit(基础语音服务)
  • ICRA顶会 | 当无人机遇上扩散模型:如何让四旋翼飞行器在复杂环境中「稳如泰山」?
  • 重塑用户体验:用户界面设计、交互设计及视觉体验优化的融合策略