跳到主要內容

waitForNone(相依性)

一種並行處理輔助函式,其會針對請求相依性的目前狀態回傳一組 可載入項目

相依性可以元組陣列或物件中命名的相依性提供。


function waitForNone(dependencies: Array<RecoilValue<>>):
RecoilValueReadOnly<UnwrappedArrayOfLoadables>
function waitForNone(dependencies: {[string]: RecoilValue<>}):
RecoilValueReadOnly<UnwrappedObjectOfLoadables>

waitForNone() 類似於 waitForAll(),只不過它會立即回傳,並且會替每個相依性回傳一個 可載入項目,而非直接傳回這些值。它類似於 noWait(),只不過它允許一次請求多個相依性。

此輔助函式對於處理部分資料或當不同資料變得可用時,逐漸更新 UI 有用。

漸增式載入範例

此範例會使用多個層級繪製圖表。每一個層級都有可能需要執行耗時的資料查詢。這會立即繪製圖表,並對每個仍然處於處理中的層級使用計數器,並且會在該層級資料變更後,更新圖表並新增每個新層級。如果任何層級的查詢有錯誤,那麼只有該層級會顯示錯誤訊息,其餘層級會繼續繪製。

function MyChart({layerQueries}: {layerQueries: Array<RecoilValue<Layer>>}) {
const layerLoadables = useRecoilValue(waitForNone(layerQueries));

return (
<Chart>
{layerLoadables.map((layerLoadable, i) => {
switch (layerLoadable.state) {
case 'hasValue':
return <Layer key={i} data={layerLoadable.contents} />;
case 'hasError':
return <LayerErrorBadge key={i} error={layerLoadable.contents} />;
case 'loading':
return <LayerWithSpinner key={i} />;
}
})}
</Chart>
);
}