React 中的“Suspense”是什么，它与 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 就像一个承诺，但专门用于渲染和状态管理。

承诺是特定于语言或特定于代码的。

悬念就像对您的 UI 的承诺。

Answer 3

如果你问到 Suspense 组件，你可以认为<Suspense/>是加载边界（比如错误边界），你可以设置加载粒度。

但是如果你问悬念机制：

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

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

                                        // 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