javascript - React 中的 'Suspense' 是什么？它与 Promise 有何关系？

Question

并发 React 扩展了 React 16.6 中引入的 Suspense 概念。

根据the docs :

Suspense lets your components “wait” for something before they can render.

这在多大程度上与 Pr​​omise 是不同的概念？

Answer 1

理论上，它与 Promise 的作用非常相似，只是它是有条件的。一个真正常见的用例是在加载主要组件所依赖的数据时显示正在加载的组件。

import React, { lazy, Suspense } from 'react'
import { Route } from 'react-router-dom'
import Loading from './Loading'

const ItemList = lazy(() => import('./ItemList'))

const App = props => {
    return (
        <Suspense fallback={<Loading />}>
            <Route path="items" component={ ItemList } />
        </Suspense>
    )
}