移动端H5开发-常用技巧篇

1.前言

相比大家看到useImperativeHandle会感到十分陌生，但部分开源代码经常会出现它的身影，网上查阅的资料也是含糊不清。经过一翻资料查询，终于摸清了一点，现在分享给各位爷。

2.useImperativeHandle初探

React官网的定义

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。

个人理解

官网的话用大白话解析：useImperativeHandle的作用是将子组件的指定元素暴漏给父组件使用。也就是父组件可以访问到子组件内部的特定元素。

3.获取元素的几种方式

下面我将逐步介绍获取元素的方式，进而引出今天的主角useImperativeHandle。

3.1 useRef：获取组件内部元素

import {useRef} from "react"
export default function() {//1.const ele = useRef()//3.获取元素const getElememntP = () => {console.log(ele.current)}return <div ><button onClick={()=>getElememntP()}>获取p元素</button>//2.<p ref={ref}></p></div>
} 

点击按钮，我们可以获取到p元素。上面是useRef获取元素的方法，先简单小结下步骤

1.引入useRef,定义变量
2.在需要获取的dom元素上使用ref进行变量绑定
3.使用变量.current获取对应元素

3.2 forwardRef：父组件获取子组件内部的一个元素

上面的useRef在函数组件可以获取自身组件内部的元素，但是如果我们需要在父组件获取或者操作儿子组件的一个元素，此时forwardRef就随之出现了。

father.js

import {useRef} from "react"
import Son from "./son"
export default function(){const eleP = useRef()const getElement = () => {console.log(eleP.current)}return <div><button onClick={()=>getElement()}>点击获取子组件的p元素</button><Son ref={eleP}/></div>
} 

son.js

import {forwardRef} from "react"

export default forwardRef(function(props,ref){return <div ><p ref={ref}></p></div>
}) 

父元素点击按钮后，可以获取到儿子组件的p元素。

forwardRef在父组件获取儿子组件内部一个元素时，操作如下。

1.父组件按照useRef的规则绑定到儿子组件上
2.儿子组件使用forwardRef包裹，并在函数组件传递的参数接收,第一个参数porps接收父组件传递的数据，第二个ref接收的就是dom引用
3.在需要获取儿子组件的元素上直接绑定ref的值

3.3 useImperativeHandle：父组件可以获取/操作儿子组件多个元素

经过上面层层递进，终于来到我们今天的主角了，请大声告诉我她的名字：是usexxxHandle。它可以在父组件内部直接获取儿子组件任意的dom元素对象。

father.js

import {useRef} from "react"
import Son from "./son"
export default function(){const eleP = useRef()const getElement = () => {console.log(eleP.current.ele1.current)console.log(eleP.current.ele2.current)}return <div><button onClick={()=>getElement()}>点击获取子组件元素</button><Son ref={eleP}/></div>
} 

son.js

import {useRef,forwardRef,useImperativeHandle} from "react"
export default forwardRef(function(props,ref){const ele1 = useRef()const ele2 = useRef()useImperativeHandle(ref,()=>{return {ele1,ele2}},[])return <div ><h2 ref={ele1}></h2><h3 ref={ele2}></h3></div>
}) 

结果

<h2></h2>
<h3></h3> 

父组件点击按钮后，可以一次性获取到多个标签元素，通过useImperativeHandle函数内部返回的对象可以获取对应的标签。具体使用直接看例子就行，我列举下useImperativeHandle的参数要求吧

useImperativeHandle(ref,()=>{return {dom1,dom2}
},[]) 

第一个参数是组件的第二个参数ref 第二个参数是一个回调函数，内部返回的对象就是抛给父组件的元素对象 第三个参数是一个依赖数组，类似useEffect的依赖数组，如果依赖数组内部传递的数据发生改变，就会重新触发回调函数。

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享