TA貢獻(xiàn)1752條經(jīng)驗(yàn) 獲得超4個(gè)贊
理論上，它與 Promise 的作用非常相似，只是它是有條件的。一個(gè)非常常見的用例是在加載主要組件所依賴的數(shù)據(jù)時(shí)顯示加載組件。
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>
)
}
TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊
Suspense 就像一個(gè)承諾，但專門用于渲染和狀態(tài)管理。
承諾是特定于語言或特定于代碼的。
懸念就像對您的 UI 的承諾。
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超9個(gè)贊
如果你問到 Suspense 組件，你可以認(rèn)為<Suspense/>是加載邊界（比如錯(cuò)誤邊界），你可以設(shè)置加載粒度。
但是如果你問懸念機(jī)制：
當(dāng)組件所需的數(shù)據(jù)未準(zhǔn)備好時(shí)，組件會(huì)通過拋出承諾來中止渲染。當(dāng) promise 被解決時(shí)，react 將再次渲染組件。這次數(shù)據(jù)準(zhǔn)備好了，組件可以繼續(xù)渲染。請注意，組件函數(shù)將從一開始就被調(diào)用，這就是為什么你不應(yīng)該在渲染體內(nèi)部產(chǎn)生副作用。
請注意，在此機(jī)制中沒有異步功能或等待。
// 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
舉報(bào)