React 中的“悬念”是什么，它与 Promise 有什么关系？

Question

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

根据文档：

Suspense 让你的组件在渲染之前“等待”某些东西。

这在多大程度上与 Promise 的概念不同？

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>
    )
}

Answer 2

Suspense 类似于 promise，但专门用于渲染和 state 管理。

promise 是特定于语言或特定于代码的。

Suspense 就像你的 UI 的 promise。

Answer 3

如果询问 Suspense 组件，可以将<Suspense/>视为加载边界（如错误边界），并且可以设置加载粒度。

但如果你问悬念机制：

当组件所需的数据未准备好时，组件通过抛出 promise 中止渲染。 当 promise 解决后，react 会再次渲染组件。 这次数据准备好了，组件可以继续渲染。 请注意，组件 function 将从一开始就被调用，这就是为什么您不应该在渲染主体内产生副作用的原因。

请注意，在此机制中没有异步 function 或等待。

                                        // time -->
function SomeComponent(props) {
  const [value, setValue] = useState()  // 1           3
  const posts = resource.posts.read()   //  2 ops wait ^4  
  useSomeHook()                         //  ^          | 5
  return <div>...</div>;                //  |          |  6
}                                       //  |          |
                                        //  |          ^ data is ready,
                                        //  |            compnent re-render
                                        //  |            again from start
                                        //  |
                                        //  ^ data is missing, throw promise,
                                        //    react will re-render component
                                        //    when promise is resolved