React 19中向Vue那樣自定義狀態(tài)和方法暴露給父組件的最佳實踐

更新時間：2025年05月21日 14:57:41 作者：小碼龍~

在 React 的函數組件中,我們通常通過 props 將數據從父組件傳遞給子組件,而子組件通過狀態(tài)（useState）和副作用（useEffect）來管理自身的行為,本文將深入探討 useImperativeHandle 的用法、原理以及最佳實踐,幫助你更好地掌握這一強大的 Hook,感興趣的朋友一起看看吧

前言

在 React 的函數組件中，我們通常通過 props 將數據從父組件傳遞給子組件，而子組件通過狀態(tài)（useState）和副作用（useEffect）來管理自身的行為。然而，在某些場景下，我們希望父組件能夠直接調用子組件中的某些方法或訪問其內部狀態(tài)。這時，useImperativeHandle 就派上了用場。

本文將深入探討 useImperativeHandle 的用法、原理以及最佳實踐，幫助你更好地掌握這一強大的 Hook。

一、什么是 useImperativeHandle？

useImperativeHandle 是 React 提供的一個 Hook，用于自定義暴露給父組件的實例值。它通常與 forwardRef 一起使用，允許父組件通過 ref 訪問子組件中定義的方法或屬性。

1.1 為什么需要 useImperativeHandle？

封裝組件內部邏輯：允許子組件將內部方法或狀態(tài)暴露給父組件，而不需要將所有細節(jié)公開。
增強組件的可復用性：通過暴露特定的 API，父組件可以更靈活地控制子組件的行為。
避免直接操作 DOM：雖然 React 鼓勵聲明式編程，但在某些場景下（如操作第三方庫），可能需要直接操作 DOM 或組件實例。

1.2 基本語法

import React, { useImperativeHandle, forwardRef } from 'react';
	const ChildComponent = forwardRef((props, ref) => {
	  useImperativeHandle(ref, () => ({
	    customMethod: () => {
	      console.log('Custom method called!');
	    },
	  }));
	  return <div>Child Component</div>;
	});
	function ParentComponent() {
	  const childRef = React.useRef(null);
	  const handleClick = () => {
	    childRef.current?.customMethod();
	  };	
	  return (
	    <div>
	      <ChildComponent ref={childRef} />
	      <button onClick={handleClick}>Call Child Method</button>
	    </div>
	  );
	}

二、useImperativeHandle 的常見用法

3.1 暴露自定義方法

這是 useImperativeHandle最常見的用法。子組件可以暴露一些方法供父組件調用。

示例：自定義輸入組件

interface ChildRef {
  focus: () => void;
  getValue: () => string;
}
import React, { useImperativeHandle, useState, useRef } from "react";
// 子組件
const CustomInput = ({ ref }: { ref: React.Ref<ChildRef> }) => {
  const [value, setValue] = useState("");
  const iptRef = useRef<HTMLInputElement>(null);
  useImperativeHandle(ref, () => ({
    focus: () => {
      iptRef.current?.focus();
    },
    getValue: () => value,
  }));
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      ref={iptRef}
    />
  );
};
// 父組件
function ParentComponent() {
  const inputRef = useRef<ChildRef>(null);
  const handleFocus = () => {
    inputRef.current?.focus();
  };
 // 得到子組件的輸入框中的值
  const handleGetValue = () => {
    console.log("Input value:", inputRef.current?.getValue());
  };
  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleFocus}>聚焦</button>
      <button onClick={handleGetValue}>得到輸入框值</button>
    </div>
  );
}
export default ParentComponent;

3.2子組件封裝的彈窗關閉方法暴露給外部

我們平常會封裝一些組件，但改變組件狀態(tài)通常由外部組件調用，這時我們就可以暴露方法給外部

示例：

interface ChildRef {
  focus: () => void;
  getValue: () => string;
  close: () => void;
}
import React, { useImperativeHandle, useState, useRef } from "react";
// 子組件
const CustomInput = ({ ref }: { ref: React.Ref<ChildRef> }) => {
  const [value, setValue] = useState("");
  const iptRef = useRef<HTMLInputElement>(null);
  // 子組件的彈窗關閉
  const close = () => {
    console.log("子組件的彈窗關閉");
  };
  useImperativeHandle(ref, () => ({
    focus: () => {
      iptRef.current?.focus();
    },
    getValue: () => value,
    // 暴露子組件的彈窗關閉方法
    close: close,
  }));
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      ref={iptRef}
    />
  );
};
// 父組件
function ParentComponent() {
  const inputRef = useRef<ChildRef>(null);
  const handleFocus = () => {
    inputRef.current?.focus();
  };
  const handleGetValue = () => {
    console.log("Input value:", inputRef.current?.getValue());
  };
  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleFocus}>聚焦</button>
      <button onClick={handleGetValue}>得到輸入框值</button>
      <button onClick={() => inputRef.current?.close()}>關閉彈窗</button>
    </div>
  );
}
export default ParentComponent;

簡單效果展示：