您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

深入Facebook 官方React 状态管理器Recoil讲解

时间:2020-05-17 16:20:34  来源:  作者:

深入Facebook 官方React 状态管理器Recoil讲解

 

作者: 砖家

转发链接:https://mp.weixin.qq.com/s/cjwv25hSLBsUQ9m5De6vUg

前言

说到状态管理器,轮子满天飞。在 Class 时代,redux 与 mobox 几乎占据了全部市场,几乎没有没用过 redux 的同学。随着 Hooks 的诞生,新的一批轮子应运而生,其中有代表性的有 unstated-next、constate 等等。当然无论什么轮子,要解决的问题都是一样的:跨组件状态共享。在解决这个核心问题的同时,需要尽可能的满足以下几个特性:

  • TypeScript 支持
  • 友好的异步支持
  • 支持状态互相依赖
  • 同时支持 Class 与 Hooks 组件
  • 使用简单

Recoil 体验

最近,facebook 官方出了一个状态管理器解决方案 Recoil[1],我们来体验一下。

准备工作

使用 Recoil,我们需要在项目最外层包一个 RecoilRoot ,这个和大部分状态管理器一致,通过 context 来跨组件传递数据。

import React from 'react';
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
        ...
    </RecoilRoot>
  );
}

 

跨组件状态共享

状态最简单的就是定义和使用。在 Recoil 中,通过 atom 来定义一个状态。

const inputValueState = atom({
  key: "inputValue",
  default: ""
});

如上面的代码所示,我们定义了一个 inputValue 状态,它的默认值是空字符串。需要注意的是 key 字段,它应该是全局唯一的。这个 key 主要为了 debug 方便,持久化数据(数据恢复时的唯一标识),以及可以方便的看到全局 atoms 树。消费状态也比较简单,通过 useRecoilState 来消费状态。

import React from "react";
import { useRecoilState } from "recoil";
import { inputValue } from "../store";

const InputA = () => {
  const [value, setValue] = useRecoilState(inputValueState);

  return <input value={value} onChange={e => setValue(e.target.value)} />;
};

export default InputA;

是不是很简单?Recoil 的基础用法就是这样的。我在这里写了一个 demo[2],你可以体验下。

状态互相依赖

有些状态需要依赖其它状态,这时候就要用 selector 来定义这个状态了。比如,我们需要定义一个新的状态 filterdInputValue ,它是过滤 inputValue 中的数字后的值。

const filterdInputValue = selector({
  key: "filterdInputValue",
  get: ({get}) => {
    // 通过 get 可以读取其它状态
    const inputValue = get(inputValueState);
    return inputValue.replace(/[0-9]/ig, "");
  },
});

selector 比较简单,就是为了实现状态的依赖。你可以在这个 demo[3] 体验下。

异步支持

良好的异步请求支持是状态管理器必不可少的。Recoil 提供了一个 useRecoilValueLoadable 来处理异步请求。直接上例子:

const currentUserNameQuery = selector({
  key: "CurrentUserName",
  get: async () => {
    const response = await queryUserInfo();
    return response.name;
  }
});

我们需要通过 selector 来定义异步状态,如果 get 函数是一个 Promise,则代表该状态为异步状态,需要使用 useRecoilValueLoadable 来消费该状态。

const UserName = () => {
  const userNameLoadable = useRecoilValueLoadable(currentUserNameQuery);
  switch (userNameLoadable.state) {
    case "hasValue":
      return <div>{userNameLoadable.contents}</div>;
    case "loading":
      return <div>Loading...</div>;
    case "hasError":
      throw userNameLoadable.contents;
  }
};

从上面例子可以看到, useRecoilValueLoadable 返回的状态,可以通过 state 字段读取到异步请求的状态。我写了个 demo[4],你可以体验下。

深入Facebook 官方React 状态管理器Recoil讲解

 

当然通过 useRecoilValueLoadable 来消费异步状态,比较符合我们当前的习惯。但 Recoil 更推荐通过 React.Suspense 来消费异步状态,这里就仁者见仁了,虽然 Suspense 可能是方向,但用起来是还不太习惯。

const UserName = () => {
  const userName = useRecoilValue(currentUserNameQuery);
  return <>{userName}</>
 }
};
function MyApp() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <UserName />
    </React.Suspense>
  );
}

 

评价

优点

  • 之前状态管理器满天飞,如果官方能一统天下,应该算一件好事情。
  • 对 React concurrent 模式支持良好。

不足

当前 Recoil 还处于开发阶段,文档都还不是很全。基于现状,说几点我的感受。

1. 没有使用 ts 实现,目前不支持 ts

这点我很惊讶,也是写这个文章的时候才发现的,很奇怪。讲道理 Recoil 支持 typescript 应该是顺手的事情,可能后期需要来个 @types/recoil 吧。

2. 目前没有支持 Class 组件消费状态。

这个特性应该是必备的,应该不会彻底抛弃 Class 组件。估计下个版本肯定会支持的这个特性的。实现成本较低,不支持的话就太反人类了。

3. API 偏多,有一定上手成本。

深入Facebook 官方React 状态管理器Recoil讲解

 

各类 API 一共有 19 个,偏复杂了。感觉很多都是可以合并的,比如 atom 和 selector 合并成一个等等(也可能是我考虑不成熟)。建议官方可以考虑精简精简,本来是一个很简单的东西,搞的太复杂了。

4. 消费较繁琐

我们需要消费一个状态的时候,需要 import 两个东西,比较繁琐。

import { useRecoilState } from "recoil";
import { inputValueState } from "../store";

// 用法
useRecoilState(inputValueState);

本来应该可以直接通过字符串 key 消费的,但这样和 redux 问题一样了,无法支持 ts。

import { useRecoilState } from "recoil";

useRecoilState('inputValueState');

无论如果,import 两个东西不是一个好的用法。

5. 没有足够的亮点

没有看到让人眼前一亮的东西,没有使用冲动。静观发展~

后记

Recoil 整体看下来,比较中庸,需要静观发展。另外推荐一下我目前正在用的最简单的 React 状态管理器 hox[5],只有一个 API,非常符合直觉,没有任何上手成本,完全拥抱 Hooks 。



Tags:Facebook   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
在现在的国内市场上,大部分做外贸的老板们都会选择在facebook上投广告,选择facebook不只是因为这个平台是全球最大的社交媒体网络,有很多活跃用户(根据调查facebook月活跃用户至...【详细内容】
2021-12-17  Tags: Facebook  点击:(10)  评论:(0)  加入收藏
据路透社及美国CNN网站等多家媒体2日报道,美国社交媒体平台脸书(Facebook)周二(2日)宣布将关闭其面部识别系统,该系统可自动识别照片和视频中的用户,理由是社会对使用此类技术的担...【详细内容】
2021-11-03  Tags: Facebook  点击:(35)  评论:(0)  加入收藏
每经编辑:李泽东2021年10月28日注定是Facebook史上历史性的一天。在这一天,Facebook改名了。美东时间10月28日周四,在名为Facebook Connect的年度大会上,Facebook宣布,Facebook将...【详细内容】
2021-10-29  Tags: Facebook  点击:(47)  评论:(0)  加入收藏
Facebook养号一直是跨境电商er的一个痛点和难点。想要想成规模利益,一个账号肯定不够。但是同一台电脑登录多个facebook账号,分分钟账号就会被封。明明是来做生意的,却被逼成专...【详细内容】
2021-10-22  Tags: Facebook  点击:(48)  评论:(0)  加入收藏
最近,美国联邦贸易委员会(FTC)重新发起对Facebook的反垄断起诉。FTC称,Facebook的用户数量和用户贡献内容的累积构成了垄断要件。Facebook的用户大,内容积累长,已经具有不可替代...【详细内容】
2021-08-24  Tags: Facebook  点击:(165)  评论:(0)  加入收藏
大家好,我是小马丁,专注跨境掘金。 今天分享的是我们跨境掘金俱乐部里的一篇精华文章。 Facebook广告,基本是现在做独立站的小伙伴们必做的推广方式之一。 没办法,谁让独立站没...【详细内容】
2021-05-25  Tags: Facebook  点击:(229)  评论:(0)  加入收藏
1摘要本文给大家剖析了一个有趣的现象:IT 业界使用最广泛的版本管理系统 Git,却不被硅谷领先的科技公司 Google、Facebook 等垂青的原因。分析了 Google 的版本和分支管理模式...【详细内容】
2021-05-17  Tags: Facebook  点击:(228)  评论:(0)  加入收藏
在如今的世界中,算法已经成为了我们日常生活的核心。当你进行网络搜索,滚动浏览社交媒体上的信息,或者从Spotify上接收到歌曲推荐时,实际上你正在被算法指导,甚至算法比你本人更了解你的消费习惯。...【详细内容】
2020-12-25  Tags: Facebook  点击:(125)  评论:(0)  加入收藏
MyRocks是完全兼容MySQL的一个关系型数据库系统,由Facebook于2016年下半年开源,网易杭研数据库内核团队在2018年初引入,在网易云音乐某些业务场景落地使用,取得了较好的效果,在这...【详细内容】
2020-09-11  Tags: Facebook  点击:(119)  评论:(0)  加入收藏
熟悉出海业务和Facebook的朋友们都知道,其实Facebook的内置工具非常强大而且细致了,所以和Twitter相比,Facebook的工具其实并没有那么多。但是,市面上也有一些神一般存在的Fac...【详细内容】
2020-07-10  Tags: Facebook  点击:(72)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条