深入Facebook 官方React 状态管理器Recoil讲解( 二 ) _Facebook

文章插图

当然通过 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 偏多，有一定上手成本。

文章插图

各类 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。