waitForNone(dependencies)
一个并发 helper 方法,返回一组表示请求的依赖项当前状态的 Loadables
。
依赖项可以作为元组数组提供,也可以作为对象中的命名依赖项提供。
function waitForNone(dependencies: Array<RecoilValue<>>): RecoilValueReadOnly<UnwrappedArrayOfLoadables>
function waitForNone(dependencies: {[string]: RecoilValue<>}): RecoilValueReadOnly<UnwrappedObjectOfLoadables>
waitForNone()
类似于 waitForAll()
,只是它会立即为每个依赖项返回一个 Loadable
,而不是直接返回值。它类似于 noWait()
,只是它允许同时请求多个依赖项。
此 helper 方法对于处理部分数据或在不同数据可用时增量更新 UI 非常有用。
#
增量加载示例此示例渲染了一个多层图表。每一层都存在耗时的数据查询操作。它将立即使用 spinners 为每个处于 pending 的图层渲染图表,并在该图层的数据返回时,更新图表以添加该层数据。如果任一图层的查询出现错误,那么只有该图层会显示错误消息,其余图层将继续渲染。
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> );}