React 18中如何在新组件异步初始化完成前保留旧组件显示？

你对Suspense的理解存在偏差——它并非仅适用于懒加载组件或特定框架，React 18原生支持自定义Suspense兼容的异步逻辑，完全可以在Electron应用中使用。下面提供两种可行方案：

方案一：利用Suspense + 自定义异步资源 #

通过将新组件的初始化逻辑封装为Suspense可识别的异步资源，就能让React在等待初始化完成时自动保留旧组件的渲染状态。

1. 封装异步操作工具函数：

function wrapPromise(promise) {
  let status = "pending";
  let result;
  let suspender = promise.then(
    (res) => {
      status = "success";
      result = res;
    },
    (err) => {
      status = "error";
      result = err;
    }
  );
  return {
    read() {
      if (status === "pending") {
        throw suspender;
      } else if (status === "error") {
        throw result;
      } else if (status === "success") {
        return result;
      }
    },
  };
}

2. 包装新组件的初始化逻辑：

function createNewComponentResource() {
  const initPromise = new Promise((resolve) => {
    // 模拟新组件的异步初始化（数据获取、准备工作）
    setTimeout(() => {
      resolve({ ready: true });
    }, 2000);
  });
  return wrapPromise(initPromise);
}

3. 在父组件中使用Suspense：

import { Suspense, useState } from "react";

function ParentComponent() {
  const [resource, setResource] = useState(null);

  // 触发切换新组件的逻辑
  const triggerSwitch = () => {
    setResource(createNewComponentResource());
  };

  return (
    <div>
      <button onClick={triggerSwitch}>切换到新组件</button>
      {!resource ? (
        <OldComponent />
      ) : (
        <Suspense fallback={<OldComponent />}>
          <NewComponent resource={resource} />
        </Suspense>
      )}
    </div>
  );
}

function NewComponent({ resource }) {
  // 读取异步资源，未完成时会抛出promise触发Suspense
  const data = resource.read();
  return <div>新组件（已完成初始化）</div>;
}

方案二：自定义组件切换逻辑 #

如果不想依赖Suspense，也可以手动控制新旧组件的显示状态，确保新组件初始化完成后再切换可见性：

import { useState, useEffect, useRef } from "react";

function ParentComponent() {
  const [showNewComponent, setShowNewComponent] = useState(false);
  const newComponentReady = useRef(false);

  const triggerSwitch = () => {
    // 先不切换显示，等待新组件初始化完成
    setShowNewComponent(true);
  };

  return (
    <div>
      <button onClick={triggerSwitch}>切换到新组件</button>
      {/* 始终渲染旧组件，直到新组件准备完成 */}
      {!newComponentReady.current && <OldComponent />}
      {/* 新组件先隐藏，初始化完成后再显示 */}
      {showNewComponent && (
        <NewComponent
          onReady={() => {
            newComponentReady.current = true;
          }}
          style={{
            opacity: newComponentReady.current ? 1 : 0,
            position: newComponentReady.current ? "static" : "absolute",
            width: "100%",
          }}
        />
      )}
    </div>
  );
}

function NewComponent({ onReady }) {
  useEffect(() => {
    // 模拟异步初始化
    const init = async () => {
      await fetchData();
      await prepareComponent();
      onReady();
    };
    init();
  }, []);

  return <div>新组件内容</div>;
}

这种方式通过CSS控制新组件的可见性，避免初始化过程中尺寸变化导致的闪烁，同时保留旧组件直到新组件完全就绪。

内容的提问来源于stack exchange，提问作者Erik J