React-Hooks之useImperativeHandler使用介绍

更新时间：2023年07月17日 11:03:12 作者：YiYa_咿呀

这篇文章主要为大家介绍了React-Hooks之useImperativeHandler使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

什么是useImperativeHandle Hook?

useImperativeHandle可以让你在使用ref 时自定义暴露给父组件的实例值,我的理解就是不让外界随便对通过ref拿到的元素进行操作，maybe我们可以称之为“权限配置"这里出现了ref，小单简单地回顾一下前几天学习的useRef,可以知道ref就是帮助我们获取某个元素而设定的。

But!!!!!我记得当时说过useRef并不能帮助我们拿到函数式组件，只能帮我们拿到函数式组件中的某个元素,让小单来验证一下吧。

//1. 构造一个函数式组件
import React, {useRef} from 'react';
function Home(props) {
    return (
        <div>
            <p>Home</p>
            <input type="text" placeholder={'请输入内容'}/>
        </div>
    )
// App.js
function App() {
  // 2.创建一个ref
    const appRef = useRef();
    function btnClick() {
//打印一下ref拿到的元素
         console.log(appRef);
         console.log(appRef.current);
    }
    return (
        <div>
            <Home ref={appRef}/>
            <button onClick={()=>{btnClick()}}>获取</button>
        </div>
    )
}

结果如下：可以发现useRef拿不到函数式组件Home，但是控制台给了我们提示，可以使用React.forward()

让我们跟着控制台的提示来尝试一下吧~我对代码进行了改进React.forward()和mome一样是一个高阶组件

主要改进

const ForwardHome = forwardRef(Home);

代码如下：

import React, {useRef, forwardRef} from 'react';
//1. 构造一个函数式组件
function Home(props) {
    return (
        <div>
            <input type="text" placeholder={'请输入内容'}/>
        </div>
    )
// App.js
function App() {
  // 2.创建一个ref
    const appRef = useRef();
    function btnClick() {
//打印一下ref拿到的元素
         console.log(appRef);
         console.log(appRef.current);
    }
    return (
        <div>
//用forwardRef返回的ForwardHome代替Home
            <ForwardHome ref={appRef}/>
            <button onClick={()=>{btnClick()}}>获取</button>
        </div>
    )
}

结果如下，这表明我们此时我们通过React.forward()可以拿到函数式组件了

既然可以拿到函数式组件了，那意味着我们也可以对其进行操作，试一下吧~

将btnClick方法添加对其操作的代码

此时页面会自动聚焦并显示设置的文本：

    function btnClick() {
        //打印一下ref拿到的元素
         console.log(appRef);
         console.log(appRef.current);
      //对拿到的元素进行操作
        appRef.current.focus();
        appRef.current.value = '华科上岸，小单冲冲冲！';
    }

但是问题又来了，如果说我并不想让外界通过以上方法随意的对拿到的函数式组件进行操作，只可以进行部分操作（类似于权限控制的说法)该怎么做呢？

此时useImperativeHandler就诞生了！

用法：

1. 导入useImperativeHandle
import React, {useRef, forwardRef, useImperativeHandle} from 'react';
2.创建
//接受的第一个参数是一个ref,第二个参数是一个回调函数，返回其允许进行的操作
useImperativeHandle(appRef, ()=>{
        return {
            myFocus: ()=>{
                inputRef.current.focus();
            }
        }
    });

具体代码：

import React, {useRef, forwardRef, useImperativeHandle} from 'react';
function Home(props, appRef) {
    const inputRef = useRef();
    useImperativeHandle(appRef, ()=>{
        return {
            myFocus: ()=>{
                inputRef.current.focus();
            }
        }
    });
    return (
        <div>
            <p>Home</p>
            <input ref={inputRef} type="text" placeholder={'请输入内容'}/>
        </div>
    )
}
const ForwardHome = forwardRef(Home);
function App() {
    const appRef = useRef();
    function btnClick() {
        // console.log(appRef);
        // console.log(appRef.current);
        appRef.current.focus();
        appRef.current.value = '华科上岸，小单冲冲冲！';
    }
    return (
        <div>
            <ForwardHome ref={appRef}/>
            <button onClick={()=>{btnClick()}}>获取</button>
        </div>
    )
}
export default App;

此时仍然通过 appRef.current.focus();进行操作就不可以，因为useImperativeHandle第二个参数返回的东西里没有这个操作

终极方案

调用useImperativeHandle定义的myFocus可以实现自动聚焦

import React, {useRef, forwardRef, useImperativeHandle} from 'react';
function Home(props, appRef) {
    const inputRef = useRef();
    useImperativeHandle(appRef, ()=>{
        return {
            myFocus: ()=>{
                inputRef.current.focus();
            }
        }
    });
    return (
        <div>
            <p>Home</p>
            <input ref={inputRef} type="text" placeholder={'请输入内容'}/>
        </div>
    )
}
const ForwardHome = forwardRef(Home);
function App() {
    const appRef = useRef();
    function btnClick() {
        // console.log(appRef);
        // console.log(appRef.current);
        // appRef.current.focus();
       // appRef.current.value = '华科上岸，小单冲冲冲！';
        appRef.current.myFocus();
    }
    return (
        <div>
            <ForwardHome ref={appRef}/>
            <button onClick={()=>{btnClick()}}>获取</button>
        </div>
    )
}
export default App;

以上就是React-Hooks之useImperativeHandler使用介绍的详细内容，更多关于React-Hooks useImperativeHandler的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React中this丢失的四种解决方法
这篇文章主要给大家介绍了关于React中this丢失的四种解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
react dva实现的代码
dva是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva额外内置了react-router,fetch，可以激烈为一个轻量级的应用框架，这篇文章主要介绍了react dva实现,需要的朋友可以参考下
2021-11-11
React中props验证不足的问题及解决方案
在 React 开发中,props 是组件间通信的重要方式,通过 props,父组件可以向子组件传递数据和回调函数,然而,如果对 props 的验证不足,可能会导致类型错误、运行时错误或难以调试的问题,本文将探讨 React 中 props 验证不足的常见问题,并提供解决方案
2025-03-03
React中setState同步异步场景的使用
本文主要介绍了React中setState同步异步场景的使用，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
react中路由跳转及传参的实现
本文主要介绍了react中路由跳转及传参的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
为react组件库添加typescript类型提示的方法
这篇文章主要介绍了为react组件库添加typescript类型提示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
浅谈React组件之性能优化
这篇文章主要介绍了浅谈React组件之性能优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解
今天是使用 Reactjs + Nodejs + Mongodb 实现文件上传功能，前端我们使用 Reactjs + Axios 来搭建前端上传文件应用，后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
2022-06-06
React官方团队完善原生Hook闭包陷阱
这篇文章主要为大家介绍了React官方团队出手，补齐原生Hook短板闭包陷阱的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
React Fiber结构的创建步骤
这篇文章主要介绍了React Fiber结构的创建步骤，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-04-04