Recoil简介:React的简化状态管理

2020年12月30日11:20:25 发表评论 43 次浏览

本文概述

Recoil似乎是州管理部门中的新手, 许多人认为该部门人满为患。 Redux, MobX, Context…列表不停。

在继续讨论Recoil之前, 我想指出, 这个新的状态管理库不是React的"官方"状态管理库。

尽管Recoil可能是由Facebook团队的工程师构建(和发布)的, 但它并不代表官方的州管理库。但是, 就像Redux并不是React的官方状态管理库一样, 如果Recoil对整个社区和整个React生态系统都有价值, 那么它很可能会被许多人采用。

反冲解决的主要问题

尽管Recoil解决了自己的问题, 但它解决的问题与其他大多数状态管理库相同:全局状态管理。

我没有使用Recoil的多年经验-哎呀, 没有人!但是, 发布后, 我很好奇可以尝试一下。我阅读文档, 每一页, 然后在一个小项目中玩弄。我认为这是Recoil发光的领域。

1.感觉就像React

没有多少状态管理库可以吹嘘与React处于相同的思维模式。例如, Redux和MobX介绍了它们自己的特定术语和原理。

但是, Recoil感觉就像是使用React的全球版本useState。它还支持并发模式, 这是一个巨大的优势(撰写本文时仍在工作中)。

2.没什么可学的

我爱Redux。我也认为现代Redux并没有我们曾经讨厌的所有样板。但是, 使用Redux, 与Recoil相比, 你仍然需要学习更多。有了Recoil, 实际上没有太多需要学习的东西。那本身就是强大的。

3.简单性

我毫不怀疑, 无论你使用Recoil构建的任何应用程序, 都可以使用Redux或MobX(或那里的许多其他库)构建一样好。但是, Recoil的简单性很难被击败。

4.应用范围内的观察

与同类产品类似, Recoil可以很好地处理应用程序范围内的状态观察。但是, 该工具目前还不能像Redux这样更成熟的库提供。无疑将需要一些时间才能赶上。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

Recoil简介:React的简化状态管理1

后座力核心概念

反冲的主要概念:原子和选择器

反冲的两个最重要的概念是原子和选择器。这些是状态项的幻想术语, ​​并且是基于状态的计算值。

如果你现在不明白, 请不要担心;我将在下一节中进一步解释。但是, 需要注意的重要一点是, 我们如何将库剥离为仅两个核心原则-谈论简单性!

编写你的第一个Recoil应用

让我们构建一个最简单的Recoil应用程序:一个简单的计数器。

如果没有Recoil, 这是一个简单的计数器:

import React, { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(c => c + 1)}>Increase count</button>
    </div>
  );
}

我们通过以下方式实现了本地状态useState和一个调用状态更新程序的按钮setCount增加状态计数变量。

这里有两件事要做:

  1. 声明一个新的状态变量
  2. 更新状态变量。

让我们用Recoil完成这些。唯一的区别是整个应用程序具有全局状态, 而不是单个组件。以下是要采取的步骤。

1.将根组件包装在反冲根

使此基本示例与Recoil一起使用的第一步是将应用程序根组件包装在反冲根.

// before now, Counter would be rendered as follows
ReactDOM.render( <Counter />, document.getElementById("root"))

// now 
import { RecoilRoot } from "recoil";

ReactDOM.render( 
 <RecoilRoot>
    <Counter />
 </RecoilRoot>, document.getElementById("root"))

反冲根充当要在其中使用共享全局状态的整个组件树的全局上下文提供程序。对于更高级的读者, 如果你看一下退货声明来自Recoil的内部零件。

2.创建全局状态值

创建全局状态值的过程很简单。反冲称这些原子。

假设你有一个这样的状态对象:

{
    key1: complexStateDataStructure, key2: [id1, id2, id3], key3: complexStateDataStructure
}

在此示例中, 每个状态对象关键字都可以称为原子。原子代表一种状态, 即键1, 键2和键3.

让我们创建一个原子来容纳计数状态变量。

// Note the import 👇
import { atom } from "recoil";

// creating the state value
const count = atom({
  key: "count", default: 0
});

首先我们导入原子从畏缩, 然后使用键和默认值调用此方法。

可以理解键每个全局状态变量必须唯一。的default键还代表变量的默认值。

3.消耗全局状态变量

创建状态变量后, 我们现在可以按以下方式检索值:

// Note the import below
import { useRecoilState } from 'recoil' 

export const Counter = () => {
  // before 👇 
  //  const [count, setCount] = useState(0);
  // now 👇
   const [countState, setCount] = useRecoilState(count);;
  ...
}

主要变化如上所示。而不是使用useState, 你现在应该使用反冲钩useRecoilState检索全局状态值。

请注意, 传递给useRecoilState指创建原子的返回值。

import { atom } from "recoil";

// count here is passed to useRecoilState
const count = atom({
  key: "count", default: 0
});

这个很重要。useRecoilState必须通过后坐状态目的。这是调用原子函数, 类似于将上下文对象传递给useContext钩。

将所有这些放在一起, 你将拥有第一个Recoil应用程序。

带有反冲力的简单计数器应用程序

这远非令人印象深刻, 但可以解释反冲的基本原理。

因此, 让我们做更多。

N.B .:现在可以通过调用useRecoilState Hook在应用程序树中的不同组件中使用全局状态变量count。

那么, 你还记得Recoil的核心概念吗?

尽管Recoil显然比构建计数器更高级, 但其核心在于简单性。如前所述, 有两个核心概念:原子和选择器。已经向你介绍了第一部分, 现在介绍第二部分的工作原理。

选择器

如果你使用过Redux或MobX等较旧的状态管理库, 则选择器的概念对你来说应该不是新手。作为复习, 选择器是从应用程序状态获取计算值的有效方法。

换句话说, 如果可以根据状态来计算值, 请不要在单独的状态键处将其重新初始化;使用选择器。请查看下面的CodeSandbox。

在这个例子中, 我们有文字甚至算显示在柜台下方。为了使它正常工作, 我们需要知道状态计数值是否相等。无需初始化另一个状态值, 我们可以根据之前的值进行计算计数值。

这是如何做:

import {selector} from 'recoil'

const isEvenCount = selector({
  key: "evenCount", get: ({ get }) => {
    const state = get(count);
    return state % 2 === 0;
  }
});

乍一看这很令人困惑, 但这很简单。让我来引导你。

在上面的代码块中, 我计算了一个新值isEvenCount。这是调用选择器从功能畏缩。的选择器被一个对象调用。与原子一样, 对象也有一个键属性。的键必须是唯一的字符串;它不应与以前的任何原子/选择器键相同。

有趣的是得到属性。这是内部调用的方法得到从功能畏缩。有了这个得到函数, 你可以检索任何状态值, 如该行所示:

const state = get(count);

在return语句中, 我们然后计算isEvenCount价值为get(count)%2 == 0, 它基本上说:"计数状态变量可以除以2吗?"

使用选择器值

计算了isEvenCount值, 在组件中使用它类似于你使用原子的返回值的方式, 但是具有不同的Hook, 如下所示:

export const Counter = () => {
   const [countState, setCount] = useRecoilState(count);
   // see this 👇
   const value = useRecoilValue(isEvenCount);

  ...
}

有关更多信息, 请参见完整代码:

import {selector, useRecoilState} from 'recoil' 

const isEvenCount = selector({
  key: "evenCount", get: ({ get }) => {
    const state = get(count);
    return state % 2 === 0;
  }
});

export const Counter = () => {
   const [countState, setCount] = useRecoilState(count);
   // see this 👇
   const value = useRecoilValue(isEvenCount);

  ...
}

要在组件中获取价值, 请使用useRecoilValue挂钩, 如上所示。

值得一提的是, 调用选择器是预期传递给挂钩的对象useRecoilValue。只有这样, 你才能获得想要的实际价值。

除了仅获取值之外, 这还创建了对状态的订阅, 即, 每次选择器依赖于更改的状态值时, 都会重新计算一个新值。在我们的示例中, 每次计数变化, 为isEvenCount重新计算。

结论和下一步

虽然很年轻, 但是Recoil看起来很有前途!作为入门指南, 我仅介绍了可能的内容。

观看此空间以获取更多与Recoil相关的文章。在这方面, 我将做更多的写作和研究。另外, 现在是你观看官方发行版的好时机视频。如果你想深入了解Recoil, 建议你花些时间观看。

干杯!

全面了解生产React应用

调试React应用程序可能很困难, 尤其是当用户遇到难以重现的问题时。如果你有兴趣监视和跟踪Redux状态, 自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间,

尝试notlogy

.

Recoil简介:React的简化状态管理2
LogRocket仪表板免费试用横幅

日志火箭就像Web应用程序的DVR, 实际上记录了React应用程序中发生的一切。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 并使用客户端CPU负载, 客户端内存使用情况等指标进行报告。

notlogy Redux中间件软件包在你的用户会话中增加了一层可见性。 notlogy记录Redux存储中的所有操作和状态。

现代化如何调试React应用程序-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: