Detailed explanation of react using useImperativeHandle example

1. Preface

Compared to seeing useImperativeHandle, it will often appear in some open source codes, and the information you read online is also vague. After searching for information, I finally figured out a little bit and now I will share it with you.

First exploration

Definition of React official website

useImperativeHandleCan let you userefWhen customize the instance value exposed to the parent component.

Personal understanding

The official website is analyzed in plain language: the function of useImperativeHandle is to expose the specified elements of the child component to the parent component for use. That is, the parent component can access specific elements inside the child component.

3. Several ways to get elements

Below I will gradually introduce the way to obtain elements, and then lead to today's protagonist useImperativeHandle.

3.1 useRef: Get the internal elements of the component

import {useRef} from "react"
export default function() {
  //1.
  const ele = useRef()
  //3. Get elements  const getElememntP = () => {
    ()
  }
  return <div >
    <button onClick={()=>getElememntP()}>Getpelement</button>
    //2.
    <p ref={ref}></p>
  </div>
}

Click the button and we can get the p element. The above is the method of usingRef to obtain elements. Let's briefly summarize the steps.

• Introduce useRef and define variables
• Use ref to bind variables on the dom element you need to get
• Use variable.current to get the corresponding element

3.2 forwardRef: Parent component obtains an element inside the child component

The above useRef can obtain elements inside the function component in the function component, but if we need to obtain or operate an element of the son component in the parent component, forwardRef will appear at this time.

import {useRef} from "react"
import Son from "./son"
export default function(){
  const eleP = useRef()
  const getElement = () => {
    ()
  }
  return <div>
    <button onClick={()=>getElement()}>Click to get the subcomponentpelement</button>
    <Son ref={eleP}/></div>
}

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

After the parent element clicks the button, you can get the p element of the son component.

forwardRef operates as follows when the parent component obtains an element inside the son component.

• The parent component is bound to the son component according to the rules of useRef
• The son component uses forwardRef to wrap it and receives it in the parameters passed by the function component. The first parameter Porps receives the data passed by the parent component, and the second ref receives the dom reference.
• Directly bind the value of ref on the element that needs to get the son component

3.3 useImperativeHandle: The parent component can obtain/operate multiple elements of the son component

After going up layer by layer, we finally came to our protagonist today. Please tell me her name loudly: it is usexxxHandle. It can directly obtain any dom element object of the son component inside the parent component.

import {useRef} from "react"
import Son from "./son"
export default function(){
  const eleP = useRef()
  const getElement = () => {
    (.)
    (.)
  }
  return <div>
    <button onClick={()=>getElement()}>Click to get subcomponent elements</button>
    <Son ref={eleP}/></div>
}

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>
})

result

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

After the parent component clicks the button, multiple tag elements can be obtained at one time. The corresponding tag can be obtained through the object returned within the useImperativeHandle function. Just look at the examples for specific use. I'll list the parameters requirements of useImperativeHandle

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

The first parameter is the second parameter of the component ref The second parameter is a callback function, and the object returned internally is the element object thrown to the parent component. The third parameter is a dependency array, similar to the dependency array of useEffect. If the data passed inside the dependency array changes, the callback function will be triggered again.

The above is the detailed explanation of the detailed example of react using useImperativeHandle. For more information about react using useImperativeHandle, please follow my other related articles!