forwardRef和useImperativeHandle

forwardRef

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

• 用于让父组件可以获得子组件的 DOM 节点或实例引用。
• 适合需要父组件直接操作子组件 DOM 的场景，例如聚焦、弹出菜单等。

import { forwardRef, useRef } from 'react'
​
const MyInput = forwardRef(function Input(props, ref) {
  return <input {...props} type="text" ref={ref} />
}, [])
​
function App() {
  const ref = useRef(null)
​
  const focusHandle = () => {
    console.log(ref.current.focus())
  }
​
  return (
    <div>
      <MyInput ref={ref} />
      <button onClick={focusHandle}>focus</button>
    </div>
  )
}
​
export default App

useImperativeHandle

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

• 在使用 forwardRef 的基础上，允许子组件暴露自定义的一组方法给父组件，而不是直接暴露 DOM。
• 让父组件可以调用子组件定义的特定方法。

import { forwardRef, useImperativeHandle, useRef } from 'react'
​
const MyInput = forwardRef(function Input(props, ref) {
  // 实现内部的聚焦逻辑
  const inputRef = useRef(null)
  const focus = () => inputRef.current.focus()
​
  // 暴露子组件内部的聚焦方法
  useImperativeHandle(ref, () => {
    return {
      focus,
    }
  })
​
  return <input {...props} ref={inputRef} type="text" />
})
​
function App() {
  const ref = useRef(null)
​
  const focusHandle = () => ref.current.focus()
​
  return (
    <div>
      <MyInput ref={ref} />
      <button onClick={focusHandle}>focus</button>
    </div>
  )
}
​
export default App