教程 > recoil.js > 阅读:46

snapshot 类——迹忆客-ag捕鱼王app官网

snapshot 对象是 recoil atoms 状态的一个不可改变的快照。它的目的是规范用于观察、检查和管理全局 recoil 状态的 api。对于开发工具、全局状态同步、历史导航等大部分需求,它都是很有用的。

class snapshot {
  // 检查快照状态的访问器
  getloadable: (recoilvalue) => loadable;
  getpromise: (recoilvalue) => promise;
  // 用于为了 transaction 转换快照的 api
  map: (mutablesnapshot => void) => snapshot;
  asyncmap: (mutablesnapshot => promise) => promise;
  // 开发者工具 api
  getid: () => snapshotid;
  getnodes_unstable: ({
    ismodified?: boolean,
  } | void) => iterable>;
  getinfo_unstable: (recoilvalue) => {...};
}
function snapshot_unstable(initializestate?: (mutablesnapshot => void)): snapshot

获取快照

钩子

recoil 提供了以下钩子,用以根据当前状态获取快照。

  • userecoilcallback() - 对快照的异步访问
  • userecoilsnapshot() - 对快照的同步访问
  • userecoiltransactionobserver_unstable() - 订阅所有状态变化的快照

构建快照

你也可以使用 snapshot_unstable() 工厂函数来构建一个新快照,该工厂函数可接受一个可选的初始化函数。该快照可用于 测试 或在 react 上下文之外评估 selectors。


读取快照

对于 atom 的状态来说,快照是只读的。它们可以用来读取 atom 状态和评估 selector 的衍生状态。getloadable() 方法提供了一个 loadable 对象,其中包含该快照中 atom 或 selectors 的状态。getpromise() 方法可以用来等待异步 selectors 的评估值,所以你可以看到基于静态 atom 状态的值会是什么。

示例

function mycomponent() {
  const logstate = userecoilcallback(({snapshot}) => () => {
    console.log("state: ", snapshot.getloadable(myatom).contents);
    const newsnapshot = snapshot.map(({set}) => set(myatom, 42));
  });
}

转换快照

在有些情况下,你可能希望转换一个快照。 虽然快照是不可变的,但它们有方法将自己与一组转换映射到一个新的不可变的快照。此种映射方法接受一个回调,该回调将传递一个 mutablesnapshot,并在整个回调过程中被转换,并最终成为由映射操作返回的新快照。

class mutablesnapshot {
  set: (recoilstate, t | defaultvalue | (t => t | defaultvalue)) => void;
  reset: (recoilstate) => void;
}

注意set()reset() 方法与提供给可写 selector 的 set 属性的回调方法有相同的签名,但它们只影响新的快照,不影响当前状态。

快照导航

下面这个钩子可用于将当前的 recoil 状态导航到提供的 snapshot:

  • usegotorecoilsnapshot() —— 更新当前状态以匹配一个快照

开发者工具

快照提供了一些对 构建开发者工具 或提升 recoil 调试能力有用的方法。这个 api 仍在改进中,因此先被标记为`_unstable`;我们仍在开发初始的开发工具。

快照 id

每个已提交的状态或已改变的快照都有一个唯一的不透明的版本 id,可通过 getid() 方法获得该 id。这可以用来检测我们何时通过 usegotorecoilsnapshot() 回滚了之前的快照。

枚举 atom 和 selector

getnodes_unstable() 方法可以被用来遍历这个快照中使用的所有 atom 和 selector。atom、selector 和族可以在任何时候被创建。不过,它们只有在被实际使用时才会出现在快照中。如果 atom 和 selector 不再被使用,它们可以被从后续的状态快照中移除。

可以指定一个可选的 ismodified 标志,只返回自上一次处理以来被修改的 atom。

调试信息

getinfo_unstable() 方法可为 atom 和 selector 提供额外的调试信息。所提供的调试信息会不断改进,但可能包括:

  • loadable - 一个具有当前状态的 loadable。 与 getloadable() 等方法不同,这个方法根本不会改变快照。它提供了当前的状态,但不会初始化新的 atom/selector,执行任何新的 selector 评估,或更新任何依赖关系或订阅。
  • isset - 如果这是一个在快照状态中存储有明确值的 atom,则为 true。 如果这是一个 selector 或使用默认的 atom 状态,则为 false。
  • ismodified - 如果这是一个自上次处理后被修改的 atom,则为 true。
  • type - 要么是 atom,要么是 selector。
  • deps - 这个节点所依赖的 atom 或 selector 的迭代器。
  • subscribers - 关于这个快照的节点的订阅信息;细节正在开发中。 这类似于 usegetrecoilvalueinfo_unstable() 钩子,但它提供的信息是基于 snapshot 中的状态,而非当前状态。它不提供与 recoil 状态的快照无关的信息,例如订阅 react 组件。

状态初始化

组件和 snapshot_unstable() 工厂接受一个可选的 initializestate 参数,通过 mutablesnapshot 初始化状态。当你事先知道所有的 atom 时,这对加载持久化状态很有帮助,并且与服务器端渲染兼容,在这种情况下,状态应该与初始渲染同步设置。对于每个 atom 的初始化/持久化以及对动态 atom 的简单处理,可以参考 atom 效果

function myapp() {
  function initializestate({set}) {
    set(myatom, 'foo');
  }
  return (
    
      ...
    
  );
}

查看笔记

扫码一下
查看教程更方便
网站地图