React,Hooks中useImperativeHandle的使用

useImperativeHandle是react官方为了简便我们的ref操作，通常和forwardRef一起进行使用

下面来先看一个forwardRef案例，聚焦input框

import React, { useRef, forwardRef } from 'react'

const HYinput = forwardRef((props,ref) => {
  return <input type="text" ref={ref}></input>
})

export default function ForwardDemo() {
  const inputRef = useRef()
  return (
    <div>
      <HYinput ref={inputRef}/>
      <button onClick={e=>inputRef.current.focus()}>聚焦</button>
    </div>
  )
}

当我们在父组件里面点击这个聚焦button的时候，会调用子组件里面input的聚焦

下面我们用useImperativeHandle给它改造一下

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

const HYinput = forwardRef((props,ref) => {

  const inputRef = useRef() 

  useImperativeHandle(ref,()=>({
    focus : () =>{
      inputRef.current.focus()
    }
  }),[inputRef])

  return <input type="text" ref={inputRef}></input>
})

export default function UseImperativeHandle() {
  const inputRef = useRef()
  return (
    <div>
      <HYinput ref={inputRef}/>
      <button onClick={e=>inputRef.current.focus()}>聚焦</button>
    </div>
  )
}

这个原理就是: 我们执行的这个focus本质是useImperativeHandle里面的focus,然后我们在子组件里面再定义一个useRef,在子组件把inputRef赋给input,相当于子组件内部先获取了这个focus,然后在父组件再调用