教程 > Recoil.js > Recoil 手册 阅读:10

waitForNone(dependencies)

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

查看笔记

扫码一下
查看教程更方便