跳到主要内容

Recoil 0.0.8

·阅读时长 4 分钟

今天我们发布了 Recoil 0.0.8。它包含了一些错误修复和新功能。非常感谢所有为本次发布做出贡献的人!看到这么多人贡献力量真是太棒了。

错误修复

  • 修复了存储自引用结构的原子会导致无限循环的错误。(@n3tr 在 #153 中)
  • 修复了影响服务器端渲染的错误。(@sbaudray 在 #53 中)
  • 修复了构建系统和仓库同步问题。许多人为此做出了贡献,尤其是 @mondaychen,还有 @claudiopro、@dustinsoftware、@jacques-blom、@jaredpalmer、@kentcdodds、@leushkin 和 @tony-go。内部和 OSS 之间的 Jest 和 Flow 仍然需要保持一致的行为。

功能

TypeScript 支持

TypeScript 定义现在可以通过 DefinitelyTyped 仓库获取。

atomFamilyselectorFamily

这些实用程序帮助你创建相关的原子或选择器的集合,每个集合对应某个参数的一个值。无需手动创建一个返回原子或选择器的记忆函数,你可以使用 atomFamilyselectorFamily。未来,这些实用程序也将有助于内存管理。

atomFamily 函数返回一个从某个参数到原子的函数,为传入参数的每个值创建一个新的原子。例如,假设你想为每个通过某个 ID 标识的集合成员存储一组坐标 {x: number, y: number}。然后你可以这样写:

const coordinatesForID = atomFamily<{x: number, y: number}, ID>({
key: 'coordinatesForID',
default: {x: 0, y: 0},
});

然后可以按如下方式访问该状态:

function MyComponent({id}) {
const [coordinates, setCoordinates] = useRecoilState(
coordinatesForID(id)
);
...
}

传递给 coordinatesForID 的每个 ID 将获得自己的独立原子,其中包含坐标。这些原子中的每一个都有自己的订阅,因此使用单个 ID 状态的组件将只订阅对该 ID 的更改。

类似地,selectorFamily 允许你为某个参数的每个值创建一个不同的选择器。例如,假设你想将所有这些坐标旋转 180 度:

const rotatedCoordinatesForID = selectorFamily<{x: number, y: number}, ID>({
key: 'rotatedCoordinatesForID',
get: id => ({get}) => {
const coordinates = get(coordinatesForID(id));
return {
x: -coordinates.x,
y: -coordinates.y,
};
}
});

请注意,选择器家族的 get 属性是一个函数,它接收参数(在本例中为 ID),并返回一个具有与单个选择器的 get 属性相同签名的函数。总的来说,这就是所有原子家族和选择器家族选项的工作方式。

并发助手

我们引入了选择器家族来控制异步选择器中的并发性

  • waitForAll:并行请求所有依赖项,并等待所有依赖项都可用。
  • waitForAny:并行请求所有依赖项,并等待其中任何一个可用。
  • waitForNone:并行请求所有依赖项,但不会等待任何一个。
  • noWait 请求单个依赖项,但不会等待它可用。

这些可以用来并行检索多个依赖项,并编写依赖上游依赖项状态的逻辑。例如,你可以编写一个选择器,在异步进程进行时有条件地提供默认值,而不是将该加载状态传播到组件。

constSelectorerrorSelector

这些选择器家族分别只返回常量值或始终抛出给定错误。

readOnlySelector

这只是用只读接口包装一个读写 RecoilState

下一步

我们正在努力改进观察和持久化 API,提高速度和内存管理,并支持并发模式。非常感谢您尝试使用 Recoil,我们希望您能继续关注并见证它的成长!