小编Jor*_*n L的帖子

注意：这种情况在开发和生产中都会发生，但我<StrictMode>根本没有使用。

它看起来工作正常：

B.js

export default function B()
{
    return <p>B</p>
}

测试应用程序.js

import { lazy, Suspense } from "react";
const B = lazy(()=>import("./B"));

export default function TestApp()
{
    const counter = useRef(0);
    counter.current++;
    console.log("rendering TestApp - counter",counter.current);
    return <Suspense fallback={<p>loading B...</p>}><B/></Suspense>
}

索引.js

import { lazy, Suspense } from "react";
import {createRoot} from "react-dom/client";
const TestApp = lazy(()=>import("./TestApp"));

const root = createRoot(document.getElementById("root"));
root.render(<Suspense fallback={<p>loading testapp...</p>}><TestApp/></Suspense>);

<Suspense>但是当组件树中有一个更深层次的组件时（在 TestApp 本身中， suspending <B>），<TestApp>就会出现重复。

项目： https: …