React中控制子組件顯示隱藏的兩種方式及對比詳解

更新時間：2025年04月22日 09:22:57 作者：JacksonChen

在 react 中,如果我們想控制子組件的顯示和隱藏一般有兩種方式,一種是父組件維護子組件顯示隱藏狀態(tài),另一種則是通過 forwardRef 直接設置子組件的狀態(tài)進行維護,這兩種方式各有優(yōu)缺點,以及對于不同的使用場景不同,今天我們就來簡單討論下,需要的朋友可以參考下

方式一：子組件觸發(fā)函數修改父組件狀態(tài)

先來看一段代碼：

// 父組件
import React, { useState } from 'react';
import Modal from './Modal';

const ParentComponent = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleOpenModal = () => {
    setIsModalVisible(true);
  };

  const handleCloseModal = () => {
    setIsModalVisible(false);
  };

  return (
    <div>
    <button onClick={handleOpenModal}>打開模態(tài)框</button>
     {isModalVisible && <Modal onClose={handleCloseModal} />}
    </div>
   );
  };

  export default ParentComponent;

  // 子組件
  import React from 'react';

  const Modal = ({ onClose }) => {
    return (
      <div className="modal">
      <p>這是一個模態(tài)框</p>
      <button onClick={onClose}>關閉模態(tài)框</button>
      </div>
    );
  };

  export default Modal;

在這段代碼中，父組件來維護狀態(tài) isModalVisible，當子組件通過調用onClose 時來設置 isModalVisible為true/false。從而實現子組件的顯示或者隱藏。

優(yōu)點：

每次重新銷毀組件重建直接通過isModalVisible && <Modal/> 控制組件掛載/卸載。對于需要每次展示都重置內部狀態(tài)（如表單）的彈窗，這種銷毀重建的方式更符合預期。

痛點：

每次子組件觸發(fā)onClose時，父組件的狀態(tài)（isModalVisible）都會變化，進而導致父組件及其所有子組件重新渲染。即使這個彈窗的顯隱邏輯完全獨立于父組件的其他邏輯，父組件仍然會被迫更新。

如果彈窗的顯隱邏輯完全屬于子組件自身（比如一個“確認刪除”彈窗，點擊按鈕后才觸發(fā)關閉），那么讓父組件管理這個狀態(tài)就顯得多余，增加了不必要的代碼復雜度。

方案二：子組件自治——forwardRef

另一種思路是讓子組件自管理狀態(tài)，通過useImperativeHandle暴露控制方法給父組件，看一段代碼：

// 子組件
const Modal = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false);

  useImperativeHandle(ref, () => ({
    open: () => setVisible(true),
    close: () => setVisible(false)
  }));

  return visible ? (
    <div className="modal">
      <button onClick={() => setVisible(false)}>關閉</button>
    </div>
  ) : null;
});

// 父組件
function Parent() {
  const modalRef = useRef();

  return (
    <div>
      <button onClick={() => modalRef.current?.open()}>打開彈窗</button>
      <Modal ref={modalRef} />
    </div>
  );
}

優(yōu)點：

父組件極簡主義父組件無需維護任何狀態(tài)，尤其適合多個彈窗的場景。調用modalRef.current.open() 簡單直接，避免狀態(tài)聲明污染，也可以避免父組件及其所有子組件重新渲染。

痛點：

打破組件封裝性父組件對子組件內部方法了如指掌，形成緊耦合。一旦子組件重構方法名，所有父組件都需要同步修改。
代碼復雜度每個組件都需要包裹forwardRef ，對于代碼開發(fā)不是特別方便。

如何抉擇？

父組件狀態(tài)管理：

彈窗顯隱與父組件狀態(tài)強相關（如表單提交成功后才展示）
需要嚴格遵循單向數據流，方便狀態(tài)追溯
彈窗內部需要每次打開重置狀態(tài)

forwardRef方案：

同一彈窗在多個分散位置觸發(fā)（如頁面頭部和底部都有觸發(fā)按鈕）
彈窗需要保持內部狀態(tài)（如填寫了一半的評論框臨時關閉）
父組件層級過深，prop drilling成本過高

總結

到底是使用父組件維護還是使用forwardRef， 這取決于具體項目業(yè)務的需要，如果你的項目里彈窗的顯隱邏輯更多是子組件自己的事，而不是父組件的核心邏輯，那么forwardRef可能是更優(yōu)雅的解決方案。反之，如果彈窗的開關直接影響父組件的核心狀態(tài)（如表單提交、數據加載），那么父組件管理仍然是更可靠的選擇。

以上就是React中控制子組件顯示隱藏的兩種方式及對比詳解的詳細內容，更多關于React控制子組件顯示隱藏的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: