React useImperativeHandle處理組件狀態(tài)和生命周期用法詳解

更新時間：2023年09月14日 14:19:53 作者：羽旋杯水

React Hooks 為我們提供了一種全新的方式來處理組件的狀態(tài)和生命周期,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>;
});

依賴數(shù)組

useImperativeHandle 的第三個參數(shù)是一個依賴數(shù)組，與 useEffect 和 useMemo 中的依賴數(shù)組類似。這個依賴數(shù)組決定了何時重新創(chuàng)建暴露給父組件的實例方法。當依賴數(shù)組中的值發(fā)生變化時，useImperativeHandle 會重新執(zhí)行。

const Child = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);
  useImperativeHandle(
    ref,
    () => ({
      getCurrentCount() {
        return count;
      },
    }),
    [count]
  );
  return <div>Count: {count}</div>;
});