React.js 使用 useImperativeHandle 附加钩子

在 React 函数组件中，我们可以使用 useRef 钩子获取 DOM 元素的引用，并通过 useEffect 钩子在组件完成挂载后进行操作。

但是，在某些情况下，我们需要通过父组件直接访问子组件的一些方法和属性，并且子组件自身是无法通过 prop 来实现这个功能的。这时候，我们就需要使用 useImperativeHandle 钩子。

useImperativeHandle 简介

useImperativeHandle 钩子允许我们定义自己的 ref 对象，从而暴露出一些方法和属性，并可以将它们传递给父组件，使得父组件可以直接访问这些方法和属性。

这个钩子接受两个参数：

• 第一个参数是一个自定义的引用值，可以在子组件的任何位置进行访问；
• 第二个参数则是一个函数，它会返回一个对象，该对象包含我们想要暴露出去的方法和属性。

下面是一个简单的例子：

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

const ChildComponent = React.forwardRef((props, ref) => {
  const inputRef = useRef()

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus()
    },
    getValue: () => {
      return inputRef.current.value
    }
  }))

  return <input ref={inputRef} />
})

const ParentComponent = () => {
  const childRef = useRef()

  const handleClick = () => {
    console.log(childRef.current.getValue())
    childRef.current.focus()
  }

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>获取输入框的值并聚焦</button>
    </div>
  )
}

在这个例子中，我们自定义了一个 ref 对象，并通过 useImperativeHandle 钩子向父组件暴露出两个方法：focus 和 getValue。父组件使用 childRef.current 来访问子组件，并且可以直接调用 focus 和 getValue 方法来操作子组件内部的 input 元素。

总结

使用 useImperativeHandle 钩子，我们可以轻松地定义自己的 ref 对象，并在子组件中暴露出一些方法和属性，从而使得父组件可以更加灵活地操作子组件。

这个钩子的使用方法非常简单，只需要传递一个自定义的引用值和一个返回包含方法和属性的对象的函数即可。如果你了解 React 的 ref 机制，那么理解这个钩子是非常容易的。

参考文献：

• React 官方文档 - useImperativeHandle