React 系列 useImperativeHandle

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

什么是 useImperativeHandle？

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

基本用法

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

import React, { useRef, useImperativeHandle, forwardRef } 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。