React useImperativeHandle Hook

useImperativeHandle Hook 是一个比较比较简单的 hook,为 ref 节点添加一些处理方法,下面是来自官网例子,为 ref 添加了两个方法。

import { forwardRef, useRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus();
      },
      scrollIntoView() {
        inputRef.current.scrollIntoView();
      },
    };
  }, []);

  return <input {...props} ref={inputRef} />;
});

export default MyInput;


React 框架中对应的代码实现,代码实现比较简单,在绑定阶段mountImperativeHandle 方法中调用
在这里插入图片描述
返回值绑定在 ref.current 属性上,最后返回一个清理 ref.current 的方法。
在这里插入图片描述

总结

useImperativeHandle 在 React 为我提供了一个可以为 ref 绑定处理方法的 hook,useImperativeHandle 源码中可以看到实现了绑定以及清理的逻辑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/747667.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

香港办公室顺利落地,量子之歌发布白皮书开启银发新篇章

6月25日&#xff0c;量子之歌香港办公室开业典礼暨《2023年中国中老年服务市场白皮书&#xff1a;银发经济&#xff0c;耀眼的黄金赛道》发布会于香港中环交易广场隆重开幕。 这一里程碑事件不仅彰显了量子之歌在银发经济领域的行业领军者风范&#xff0c;更凸显了其在专业服务…

一文了解自定义表单系统开源的多个优势

降本、提质、增效&#xff0c;是当前很多企业都想实现的目的。什么样的软件可以助力企业创造价值&#xff1f;低代码技术平台是近些年得到了很多客户喜爱的平台产品&#xff0c;因为它能帮助大家减少编程代码的撰写&#xff0c;能轻松助力各部门之间做好协调沟通工作&#xff0…

算法导论 总结索引 | 第四部分 第十六章:贪心算法

1、求解最优化问题的算法 通常需要经过一系列的步骤&#xff0c;在每个步骤都面临多种选择。对于许多最优化问题&#xff0c;使用动态规划算法求最优解有些杀鸡用牛刀了&#xff0c;可以使用更简单、更高效的算法 贪心算法&#xff08;greedy algorithm&#xff09;就是这样的算…

13.1 Go 反射(Reflection)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

文本生成图像综述

本调查回顾了扩散模型在生成任务中广泛流行的背景下文本到图像的扩散模型。作为一份自成一体的作品&#xff0c;本调查首先简要介绍了基本扩散模型如何用于图像合成&#xff0c;然后介绍了条件或指导如何改善学习。基于这一点&#xff0c;我们介绍了文本到图像生成方面的最新方…

条码二维码读取设备在医疗设备自助服务的重要性

医疗数字信息化建设的深入推进&#xff0c;医疗设备自助服务系统已成为医疗服务领域的一大趋势&#xff0c;条码二维码读取设备作为自助设备的重要组成部分&#xff0c;通过快速、准确地读取条形码二维码信息&#xff0c;不公提升了医疗服务效率&#xff0c;还为患者提供了更加…

Flutter页面状态保留策略

目的: 防止每次点击底部按钮都进行一次页面渲染和网络请求 1. 使用IndexedStack 简单,只需要把被渲染的组件外部套一层IndexedStack即可 缺点: 在应用启动的时候,所有需要保存状态的页面都会直接被渲染,保存起来. 对性能有影响 2. 使用PageController 实现较为复杂,但是不用…

Biome-BGC生态系统模型与Python融合技术

Biome-BGC是利用站点描述数据、气象数据和植被生理生态参数&#xff0c;模拟日尺度碳、水和氮通量的有效模型&#xff0c;其研究的空间尺度可以从点尺度扩展到陆地生态系统。 在Biome-BGC模型中&#xff0c;对于碳的生物量积累&#xff0c;采用光合酶促反应机理模型计算出每天…

C++设计模式——Facade外观模式

一&#xff0c;外观模式简介 外观模式是一种结构型设计模式&#xff0c; 又称为门面模式&#xff0c;也是一种基于创建对象来实现的模式&#xff0c;为子系统中的各组接口的使用提供了统一的访问入口。 外观模式对外提供了一个对象&#xff0c;让外部客户端(Client)对子系统的…

dataguard 主备切换方式switchover 和 failover 操作步骤

作者介绍&#xff1a;老苏&#xff0c;10余年DBA工作运维经验&#xff0c;擅长Oracle、MySQL、PG数据库运维&#xff08;如安装迁移&#xff0c;性能优化、故障应急处理等&#xff09; 公众号&#xff1a;老苏畅谈运维 欢迎关注本人公众号&#xff0c;更多精彩与您分享。datagu…

【ATU Book - i.MX8系列 - OS】NXP i.MX Linux Desktop (Ubuntu) BSP 开发环境架设

一、概述 谈论嵌入式系统的开发环境&#xff0c;不得不提起近年来相当实用的 Yocto 建构工具。此工具拥有极为灵活的平台扩展性&#xff0c;广泛的软体套件与社群支持、多平台支援整合性&#xff0c;能够满足开发者特定需求和多种热门的嵌入式系统架设&#xff0c;已成为当今顶…

【深海王国】小学生都能玩的单片机?零基础入门单片机Arduino带你打开嵌入式的大门!(10)

Hi٩(๑o๑)۶, 各位深海王国的同志们&#xff0c;早上下午晚上凌晨好呀~辛勤工作的你今天也辛苦啦 (o゜▽゜)o☆ 今天大都督继续为大家带来系列——小学生都能玩的单片机&#xff01;带你一周内快速走进嵌入式的大门&#xff0c;let’s go&#xff01; &#xff08;10&#…

Java学习笔记(多线程):CompetableFuture

本文是自己的学习笔记&#xff0c;主要参考资料如下 https://www.cnblogs.com/dolphin0520/p/3920407.html JavaSE文档 https://blog.csdn.net/ThinkWon/article/details/102508721 1、Overview2、重要参数3、主要方法3.1、创建实例&#xff0c;获取返回值3.2、线程执行顺序相关…

三十九篇:UML与SysML:掌握现代软件和系统架构的关键

UML与SysML&#xff1a;掌握现代软件和系统架构的关键 1. 引言 1.1 为什么系统设计如此关键 在当今快速发展的技术环境中&#xff0c;系统设计的重要性不言而喻。无论是软件开发还是复杂的系统工程&#xff0c;良好的设计是确保项目成功的基石。系统设计不仅关系到功能的实现…

day38动态规划part01| 理论基础 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

**理论基础 ** 无论大家之前对动态规划学到什么程度&#xff0c;一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目&#xff0c;看我讲的理论基础&#xff0c;会有感觉 是不是简单题想复杂了&#xff1f; 其实并没有&#xff0c;我讲的理论基础内容&#xff0c;…

状态压缩动态规划(State Compression DP)算法详解

状态压缩动态规划&#xff08;State Compression DP&#xff09;是一种高效解决组合优化问题的技术&#xff0c;特别适用于那些状态空间较大且可以用二进制表示的情况。本文将详细讲解状态压缩DP的原理、常用的位运算技巧、以及具体的例题分析。 原理概述 状态压缩DP的核心思…

HTML5实现字母记忆配对游戏

HTML5实现字母记忆配对游戏 这个小游戏具有重新开始功能和难度设置功能。 “重新开始“按钮&#xff0c;点击它或完成一局游戏后&#xff0c;会自动开始新游戏。 下拉列表框&#xff0c;&#xff0c;难度设置&#xff0c;包含简单、中等和困难三个选项。 简单&#xff1a;8…

《梦醒蝶飞:释放Excel函数与公式的力量》5.4 Match函数

5.4 Match函数 5.4.1 match函数的概念 MATCH函数是Excel中的一个查找和引用函数&#xff0c;它用于在数据表或数组中搜索指定项&#xff0c;并返回该项在数组中的相对位置。以下是MATCH函数的几个关键概念&#xff1a; 1)查找值&#xff08;Lookup Value&#xff09; 这是…

Web 权限管理最佳实践:如何提升用户满意度与应用安全性?

引言 在当今数字化时代&#xff0c;Web应用的功能和复杂性不断增加&#xff0c;用户对在线服务的期望也在不断提升。为了提供丰富的用户体验&#xff0c;许多Web应用需要访问用户的个人信息或设备功能&#xff0c;如地理位置、摄像头和麦克风等。这些权限访问在提升应用功能的…

移动Web开发实战内容要点!!!

移动web开发 目录 移动web开发 第一章、Web开发标准与网页网站制作介绍 1.1Web开发标准 1.2网页基本构成元素 第二章、Web开发技术基础 2.1HTML的主要特点&#xff1a; 2.2HTML基本知识 2.3CSS样式 2.4JavaScript 第三章、打造移动Web应用程序 3.1为什么Android会成…