React Hooks 系列 之 useImperativeHandle

React Hooks 为我们提供了一种全新的方式来处理组件的状态和生命周期。其中，useImperativeHandle 是一个相对较少被提及的 Hook，但在某些场景下，它是非常有用的。本文将深入探讨 useImperativeHandle 的用法，并通过实例来加深理解。

什么是 useImperativeHandle？

useImperativeHandle 允许你自定义通过 ref 暴露给父组件的实例值。通常，我们使用 ref 来访问组件的 DOM 元素或类组件的实例。但有时，我们可能希望向父组件暴露子组件的某些特定方法，而不是整个实例或 DOM 元素。这时，useImperativeHandle 就派上了用场。

基本用法

当你想从子组件向父组件暴露某些特定的方法时，可以使用 useImperativeHandle。

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

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    sayHello() {
      console.log('Hello from Child!')
    },
  }))
  return <div>Child Component</div>
})

function Parent() {
  const childRef = useRef(null)

  const handleClick = () => {
    childRef.current.sayHello()
  }

  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </>
  )
}

与其他 Hooks 结合使用

useImperativeHandle 可以与其他 Hooks 如 useState 和 useEffect 结合使用。

const Child = forwardRef((props, ref) => {
  const [count, setCount] = useState(0)

  useImperativeHandle(ref, () => ({
    increment() {
      setCount(prevCount => prevCount + 1)
    },
    decrement() {
      setCount(prevCount => prevCount - 1)
    },
  }))

  useEffect(() => {
    console.log(`Count changed to ${count}`)
  }, [count])

  return (
    <div>
      Count:
      {count}
    </div>
  )
})

依赖数组

useImperativeHandle 的第三个参数是一个依赖数组，与 useEffect 和 useMemo 中的依赖数组类似。这个依赖数组决定了何时重新创建暴露给父组件的实例方法。当依赖数组中的值发生变化时，useImperativeHandle 会重新执行。

const Child = forwardRef((props, ref) => {
  const [count, setCount] = useState(0)

  useImperativeHandle(
    ref,
    () => ({
      getCurrentCount() {
        return count
      },
    }),
    [count]
  )

  return (
    <div>
      Count:
      {count}
    </div>
  )
})

总结

useImperativeHandle 是一个强大的工具，允许我们更细粒度地控制组件的 ref 行为。虽然在日常开发中可能不常用，但在某些特定场景下，它提供了强大的功能。希望本文能帮助你更好地理解和使用这个 Hook。