React中如何实现模态框触发后才执行内部组件的API请求？

问题根源 #

核心问题是无论模态框是否打开，<FormComponent />都被提前实例化，导致它内部useEffect里的API请求会在组件X加载时就执行，哪怕模态框还没触发。而条件渲染出现的卡顿/延迟，通常是模态框组件挂载/卸载时的动画或DOM操作开销导致的。

方案一：让Modal内部延迟渲染子组件（推荐） #

不要直接传入已实例化的<FormComponent />，而是传入组件类型，让Modal在isOpen为true时才渲染这个组件。

修改Modal调用代码： #

<Modal
  isOpen={isOpen}
  component={FormComponent} {/* 传入组件类型，而非JSX元素 */}
/>

修改Modal组件内部逻辑： #

const Modal = ({ isOpen, component: Component }) => {
  return (
    {/* 保留Modal基础结构（遮罩、容器等），即使isOpen为false也渲染透明容器，避免打开时的延迟 */}
    <div className={`modal-container ${isOpen ? 'modal-open' : ''}`}>
      {isOpen && <Component />} {/* 仅当模态框打开时，才实例化并渲染FormComponent */}
    </div>
  );
};

这种方式从根源上避免了组件提前挂载的问题，只有模态框真正打开时，FormComponent才会被挂载，它的useEffect才会触发API请求，同时还能减少页面加载时的组件实例化开销。

方案二：给FormComponent添加请求开关 #

如果无法修改Modal组件结构，可以给FormComponent增加一个shouldFetch属性，控制API请求的执行时机。

修改FormComponent： #

const FormComponent = ({ shouldFetch }) => {
  useEffect(() => {
    // 仅当shouldFetch为true时才执行API请求
    if (shouldFetch) {
      fetch('/api/your-endpoint')
        .then(res => res.json())
        .then(data => { /* 处理数据逻辑 */ });
    }
  }, [shouldFetch]); // 依赖shouldFetch，确保状态变化时触发请求

  // ...组件其余逻辑
};

修改Modal调用代码： #

<Modal
  isOpen={isOpen}
  componentName={<FormComponent shouldFetch={isOpen} />}
/>

这个方案虽无法避免FormComponent提前实例化，但能确保API请求仅在模态框打开时触发。

方案三：优化条件渲染的卡顿/延迟 #

如果一定要用条件渲染方式，可以通过分阶段控制模态框的渲染和动画，解决卡顿问题：

const [isOpen, setIsOpen] = useState(false);
const [isModalRendered, setIsModalRendered] = useState(false);

// 打开模态框：先渲染组件，再触发动画
const handleOpenModal = () => {
  setIsModalRendered(true);
  // 用setTimeout让DOM先渲染完成，再打开动画
  setTimeout(() => setIsOpen(true), 0);
};

// 关闭模态框：先关闭动画，再卸载组件
const handleCloseModal = () => {
  setIsOpen(false);
  // 等待动画完成（比如300ms，对应CSS动画时长）后再卸载
  setTimeout(() => setIsModalRendered(false), 300);
};

return (
  <>
    <button onClick={handleOpenModal}>打开模态框</button>
    {isModalRendered && (
      <Modal
        isOpen={isOpen}
        onClose={handleCloseModal}
        componentName={<FormComponent />}
      />
    )}
  </>
);

同时给Modal添加CSS过渡动画：

.modal-container {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.modal-open {
  opacity: 1;
  visibility: visible;
}

这样打开时不会有明显延迟，关闭时也能等待动画完成后再卸载组件，避免卡顿。

内容的提问来源于stack exchange，提问作者Prateek Madan