forwardRef 与 useImperativeHandle

forwardRef

作用：允许组件使用ref将一个DOM节点暴露给父组件

import { forwardRef, useRef } from "react"

// 子组件
const Son = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />
})


// 父组件
function App () {
  const sonRef = useRef(null)
  const showRef = () => {
    console.log(sonRef)
    sonRef.current.focus()
  }
  return (
    <>
      <Son ref={sonRef} />
      <button onClick={showRef}>focus</button>
    </>
  )
}

export default App

useImperativeHandle

作用：如果我们并不想暴露子组件中的DOM而是想暴露子组件内部的方法