快捷導(dǎo)航

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

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

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

前言

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

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

一、什么是 useImperativeHandle？

useImperativeHandle 是 React 提供的一個(gè) Hook，用于自定義暴露給父組件的實(shí)例值。它通常與 forwardRef 一起使用，允許父組件通過(guò) ref 訪(fǎng)問(wèn)子組件中定義的方法或?qū)傩浴?/p>

1.1 為什么需要 useImperativeHandle？

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

1.2 基本語(yǔ)法

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 的常見(jiàn)用法

3.1 暴露自定義方法

這是 useImperativeHandle最常見(jiàn)的用法。子組件可以暴露一些方法供父組件調(diào)用。

示例：自定義輸入組件

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子組件封裝的彈窗關(guān)閉方法暴露給外部

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

示例：

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);
  // 子組件的彈窗關(guān)閉
  const close = () => {
    console.log("子組件的彈窗關(guān)閉");
  };
  useImperativeHandle(ref, () => ({
    focus: () => {
      iptRef.current?.focus();
    },
    getValue: () => value,
    // 暴露子組件的彈窗關(guān)閉方法
    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()}>關(guān)閉彈窗</button>
    </div>
  );
}
export default ParentComponent;

簡(jiǎn)單效果展示：

注意點(diǎn)： 1.React18還在用forwardRef進(jìn)行接收值傳遞，在React 19直接解構(gòu)出來(lái)ref,并賦值ts類(lèi)型

總結(jié)

useImperativeHandle 是 React 中一個(gè)強(qiáng)大但容易被誤用的 Hook。通過(guò)與 forwardRef 結(jié)合，它允許子組件自定義暴露給父組件的 API，從而實(shí)現(xiàn)更靈活的組件間通信。然而，使用時(shí)需要謹(jǐn)慎，避免濫用，保持組件的封裝性和可維護(hù)性。

到此這篇關(guān)于React 19中向Vue那樣自定義狀態(tài)和方法暴露給父組件的最佳實(shí)踐的文章就介紹到這了,更多相關(guān)react vue自定義狀態(tài)和方法暴露給父組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: