Recoil 了解一下

简介

主要解决状态共享的问题，推崇状态和派生数据更细粒度控制，Redux 的数据结构是树而 Recoil 是有向图。Recoil 还是一个实验性的解决方案。

状态改变的流向是从图的根( atoms 共享状态)，通过纯函数( selectors 派生数据)，最后流入组件中。

特性：

• 共享状态具有与 React 本地状态相同的简单 get / set 接口。"出于兼容性和简便性的考虑，最好使用 React 的内置状态管理功能，而不是外部全局状态(: 好像暗示了什么"
• 天然支持 suspense，里面关键的两个点，atom 和 selector 都支持返回 loadable。支持 react 后续的 cocurrent 模式，甚至是后续的其他新特性。
• 定义是增量式和分布式的，通过观察应用程序中的所有状态更改来实现持久性，路由，时间旅行调试或撤消操作，而不会影响代码拆分。
• 可以用派生数据替换状态，而无需修改使用状态的组件，派生数据可以抹平同步异步的调用差异。
• 方便 state 持久化，原理是从 atom 处进行持久化操作，提供订阅 atom 变更的钩子，还正在开发直接订阅全部 atom 变更的钩子方法。

重要概念

Atoms

即状态，可更新和订阅，可以用 atom 直接替代 React 本地组件的 state 使用。

// 创建 atom
const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});
// 读写 atom: useRecoilState（相当于useState)
function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}

Selectors

是个纯函数，用于处理一个功能或者派生状态。入参是 atom 或其他 selector，依赖的 atom 或 selector 变更时，该 selector 会重新计算。组件也可直接订阅 selector，其改变时也会重新渲染。

selector 的设计是为了避免冗余的状态。不再需要 reducers 去同步状态，取而代之的是根据最小状态集自动计算功能。

从组件角度看，atom 和 selector 有相同的接口，可以替换使用。

// 创建 selector
const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => { // get 属性是要计算的函数，如果只提供 get 即为只读，会返回一个只读的 RecoilValueReadOnly对象。
    const fontSize = get(fontSizeState); // 可以访问其他 atom 或 selector, 同时会建立依赖关系。
    const unit = 'px';
    return `${fontSize}${unit}`; // 简单的静态依赖，也可以动态依赖
  },
  // 如果也提供了 set，则会返回一个可写的 RecoilState 对象。
});
// 只读 selector
function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState); // 只读的 selector 使用 useRecoilState 方法，入参可以是 atom 或 selector
  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={() => setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}
// 可读写的 selector
// 这个简单的选择器实质上包装了一个原子以添加一个附加字段。
const proxySelector = selector({
  key: 'ProxySelector',
  get: ({get}) => ({...get(myAtom), extraField: 'hi'}),
  set: ({set}, newValue) => set(myAtom, newValue), // 更改会沿数据流图传播回上游。
});
// 更改数据用法，需判断是否是初始值（这个用法有点麻烦呀。。。
import {selector, DefaultValue} from 'recoil';
const transformSelector = selector({
  key: 'TransformSelector',
  get: ({get}) => get(myAtom) * 100,
  set: ({set}, newValue) =>
    set(myAtom, newValue instanceof DefaultValue ? newValue : newValue / 100),
});
// 和 DefaultValue 对应的还有一个重置方法：
resetTemp = useResetRecoilState(tempCelcius);
resetTemp();

动态依赖

依赖是在 selector 计算的时候，根据实际的依赖动态确定的。因此也可以根据先前依赖关系的值，动态使用其他附加依赖。

const toggleState = atom({key: 'Toggle', default: false});
const mySelector = selector({
  key: 'MySelector',
  get: ({get}) => {
    const toggle = get(toggleState);
    if (toggle) { // 动态添加依赖
      return get(selectorA); 
    } else {
      return get(selectorB);
    }
  },
});

异步 Selector

import {selector, useRecoilValue} from 'recoil';

const myQuery = selector({
  key: 'MyDBQuery',
  get: async () => {
    const response = await fetch(getMyRequestUrl());
    if (response.error) {
      throw response.error;
    }
    return response.json(); // 返回一个 Promise
  },
});

function QueryResults() {
	// 配合上 Suspense 使用后，调用上和同步没有区别。
  // 不配合 Suspense 使用，需要自行处理它的三种状态。
  const queryResults = useRecoilValue(myQuery);
  return (
    <div>
      {queryResults.foo}
    </div>
  );
}

function ResultsSection() {
  return (
  	<RecoilRoot> // 必须
	    <ErrorBoundary> // 按需
        <React.Suspense fallback={<div>Loading...</div>}> // 强烈推荐，不然会很麻烦
          <QueryResults />
        </React.Suspense>
      <ErrorBoundary>
    </RecoilRoot>
  );
}

KEY

Atom、 Selector 都要求保证 key 的全局唯一性，甚至着重说了不唯一是个错误的用法。key 可用于调试，持久化以及某些高级 API，这些 API 可查看所有 atom 的图。在 Recoil 中无论 atom 还是 selector，都是注册成一个 node，treestate 中会保存他们对于 key 的依赖，包括组件下游、 node 下游 和 node 上游，这也是为什么要求 key 唯一的原因。每个 node 都是单独声明的，而不是像 redux 或者 mobx 那样耦合在一个对象里面，这种松耦合的方式，也是 vue3 现在做的，比较高级的说法是 runtime tree shaking。

结语

再从以下几个维度看一下这个技术:

• TypeScript 支持：最新版本0.0.10 已支持。✅
• 友好的异步支持：支持，且支持 Suspense 使用。✅
• 同时支持 Class 与 Hooks 组件：只支持 hooks。❌
• 使用简单：
  - 和 react 本身的 state 理念一致，理解成本低。✅
  - 配合 react16 新特性的强大功能，导致 API 众多，不容易记忆，不知后续会不会优化 API ❌
  - redux ➕ react-redux ➕ redux-sage ➕ reselector ≈ recoil （虽然源码代码量也是相对可观的）

最后，Recoil 还是个在实验阶段，因此文中的一些用法或者说的到的问题，后面很有可能都会变更，各位看官主要感受该技术的定位即可，等正式版发布后，如果有需要会修正文章内容。

附录

不配合 React Suspense 使用异步 selector 的姿势

function UserInfo({userID}) {
  const userNameLoadable = useRecoilValueLoadable(userNameQuery(userID));
  switch (userNameLoadable.state) {
    case 'hasValue':
      return <div>{userNameLoadable.contents}</div>;
    case 'loading':
      return <div>Loading...</div>;
    case 'hasError':
      throw userNameLoadable.contents;
  }
}

支持后续的cocurrent使用姿势

// 并发请求
const friendsInfoQuery = selector({
  key: 'FriendsInfoQuery',
  get: ({get}) => {
    const {friendList} = get(currentUserInfoQuery);
    const friends = get(waitForAll(
      friendList.map(friendID => userInfoQuery(friendID))
    ));
    return friends;
  },
});
// 处理部分数据的UI增量更新
const friendsInfoQuery = selector({
  key: 'FriendsInfoQuery',
  get: ({get}) => {
    const {friendList} = get(currentUserInfoQuery);
    const friendLoadables = get(waitForNone(
      friendList.map(friendID => userInfoQuery(friendID))
    ));
    return friendLoadables
      .filter(({state}) => state === 'hasValue')
      .map(({contents}) => contents);
  },
});