React Suspense All In One

React Suspense All In One

挂起让组件在渲染之前“等待”某些东西。
如今，Suspense仅支持一种用例：使用React.lazy动态加载组件。
将来，它将支持其他用例，例如数据获取。

https://reactjs.org/docs/react-api.html#suspense

https://reactjs.org/docs/code-splitting.html#reactlazy

React.Suspense

挂起

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

React.lazy

懒加载

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

React API

UMD + ESM

React 18

https://reactjs.org/docs/react-api.html#reactsuspense

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

https://reactjs.org/blog/2022/03/29/react-v18.html

https://17.reactjs.org/docs/concurrent-mode-suspense.html

demo

import React, { Suspense } from "react";

const OtherComponent = React.lazy(() => import("./components/OtherComponent"));
const AnotherComponent = React.lazy(() =>
  import("./components/AnotherComponent")
);

function Fallback () {
  return (
    <div>Loading...⌛️🇨🇳</div>
  );
}

function App() {
  return (
    <div className="App">
      <Suspense fallback={<Fallback />}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

export default App;

https://codesandbox.io/s/amazing-silence-62gznq?file=/src/App.tsx

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---