React 中控制子组件显示隐藏的两种方式对比

在 react 中，如果我们想控制子组件的显示和隐藏一般有两种方式，一种是父组件维护子组件显示隐藏状态，另一种则是通过 forwardRef 直接设置子组件的状态进行维护，这两种方式各有优缺点，以及对于不同的使用场景不同，今天我们就来简单讨论下。

方式一：子组件触发函数修改父组件状态

先来看一段代码：

// 父组件
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}>打开模态框</button>
     {isModalVisible && <Modal onClose={handleCloseModal} />}
    </div>
   );
  };

  export default ParentComponent;

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

  const Modal = ({ onClose }) => {
    return (
      <div className="modal">
      <p>这是一个模态框</p>
      <button onClick={onClose}>关闭模态框</button>
      </div>
    );
  };

  export default Modal;

在这段代码中，父组件来维护状态 isModalVisible，当子组件通过调用onClose 时来设置 isModalVisible为true/false。从而实现子组件的显示或者隐藏。

优点：

每次重新销毁组件重建
直接通过isModalVisible && <Modal/> 控制组件挂载/卸载。对于需要每次展示都重置内部状态（如表单）的弹窗，这种销毁重建的方式更符合预期。

痛点：

每次子组件触发onClose时，父组件的状态（isModalVisible）都会变化，进而导致父组件及其所有子组件重新渲染。即使这个弹窗的显隐逻辑完全独立于父组件的其他逻辑，父组件仍然会被迫更新。

如果弹窗的显隐逻辑完全属于子组件自身（比如一个“确认删除”弹窗，点击按钮后才触发关闭），那么让父组件管理这个状态就显得多余，增加了不必要的代码复杂度。

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

另一种思路是让子组件自管理状态，通过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>
  );
}

优点：

父组件极简主义
父组件无需维护任何状态，尤其适合多个弹窗的场景。调用modalRef.current.open() 简单直接，避免状态声明污染，也可以避免父组件及其所有子组件重新渲染。

痛点：

1. 打破组件封装性
   父组件对子组件内部方法了如指掌，形成紧耦合。一旦子组件重构方法名，所有父组件都需要同步修改。
2. 代码复杂度
   每个组件都需要包裹forwardRef ，对于代码开发不是特别方便。

如何抉择？

父组件状态管理：

• 弹窗显隐与父组件状态强相关（如表单提交成功后才展示）
• 需要严格遵循单向数据流，方便状态追溯
• 弹窗内部需要每次打开重置状态

forwardRef方案：

• 同一弹窗在多个分散位置触发（如页面头部和底部都有触发按钮）
• 弹窗需要保持内部状态（如填写了一半的评论框临时关闭）
• 父组件层级过深，prop drilling成本过高

总结

到底是使用父组件维护还是使用forwardRef， 这取决于具体项目业务的需要 ， 如果你的项目里弹窗的显隐逻辑更多是子组件自己的事，而不是父组件的核心逻辑，那么forwardRef可能是更优雅的解决方案。反之，如果弹窗的开关直接影响父组件的核心状态（如表单提交、数据加载），那么父组件管理仍然是更可靠的选择。

原文：https://juejin.cn/post/7494836390531956762