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 源码中可以看到实现了绑定以及清理的逻辑。

相关推荐
亮子AI3 分钟前
【npm】npm install 产生软件包冲突怎么办?(详细步骤)
前端·npm·node.js
汪汪大队u19 分钟前
为什么 filter-policy 仅对 ASBR 的出方向生效,且即使在该生效场景下,被过滤的路由在协议内部(如协议数据库)依然存在,没有被彻底移除?
服务器·前端·网络
慧一居士25 分钟前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
颜酱28 分钟前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法
木易 士心37 分钟前
Nginx 基本使用和高级用法详解
运维·javascript·nginx
蒙特卡洛的随机游走1 小时前
Spark的宽依赖与窄依赖
大数据·前端·spark
共享家95271 小时前
QT-常用控件(多元素控件)
开发语言·前端·qt
幸运小圣1 小时前
Iterator迭代器 【ES6】
开发语言·javascript·es6
葱头的故事1 小时前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript
中微子1 小时前
🚀 2025前端面试必考:手把手教你搞定自定义右键菜单,告别复制失败的尴尬
javascript·面试