Recoil 只需百行代码？：从通用装饰器到 Recoil

2023-09-16 19:55:33

从装饰器到 Recoil

装饰器（Decorator）并不是一门新的技术，但装饰器仅属于提案阶段，尚未被 JavaScript 语言完全原生支持。当然，除了 JavaScript 语言本身不支持之外，装饰器在很多浏览器中也尚未得到原生支持。因此，如果你想在自己的项目中使用装饰器，就需要借助一些编译器，比如 Babel，或者 Typescript 中的试验性装饰器等。

在使用装饰器之前，我们首先需要了解一下装饰器是如何实现的。装饰器本质上是一种语法糖，当我们在一个类上使用某个装饰器时，编译器实际上会为这个类自动生成一个代理类（Proxy Class）。这个代理类的原型对象实际上就是原类，而代理类的构造函数会先执行原类的构造函数，然后再执行装饰器的逻辑。装饰器还可以用来修饰函数，方法，属性等等。

Recoil 原理

Recoil 是 Facebook 官方推出的一个状态管理器解决方案，与 Redux 相比，Recoil 更适合于 hooks。Recoil 的底层依赖于装饰器，而 JavaScript 语言本身并不支持装饰器，因此，我们需要借助一些编译器，比如 Babel，或者 Typescript 中的试验性装饰器等。

Recoil 的核心思想是使用原子（Atom）来管理状态。原子是一个不可变的变量，它只能通过一个名为 atomFamily 的工厂函数来创建。atomFamily 函数接收一个键值对作为参数，键值对的 key 是原子的名称，value 是原子的初始值。

当我们使用一个原子时，我们需要通过一个名为 useRecoilValue 的 hook 来获取该原子的值。useRecoilValue hook 接收一个原子作为参数，并返回该原子的值。

自定义装饰器

既然装饰器并不是一门新的技术，那么我们如何自己实现一个自定义装饰器呢？下面给出一种简单实现自定义装饰器的通用方法：

创建一个装饰器函数，该函数接收一个目标类作为参数。
在装饰器函数中，创建一个代理类，该代理类的原型对象是目标类。
在代理类的构造函数中，先执行目标类的构造函数，然后再执行装饰器的逻辑。
将代理类返回给编译器。

通过这种方式，我们就实现了一个自定义装饰器。

总结

装饰器是一种语法糖，它可以用来修饰类、函数、方法和属性等。Recoil 是 Facebook 官方推出的一个状态管理器解决方案，它使用原子（Atom）来管理状态。原子是一个不可变的变量，它只能通过 atomFamily 函数来创建。当我们使用一个原子时，我们需要通过 useRecoilValue hook 来获取该原子的值。

自定义装饰器可以通过以下步骤来实现：