Facebook 最近内部释出一个状态管理库Recoil。心里着实吓了一跳，笔者花费了一段时间的实践选定了hox，并且完成了一套纯函数组件、纯hook、按钮级权限、微前端开发架子：X-neuron/antdFront 。这么看岂不是又得推翻重造，于是忍不住加了两天班，深度补脑了下。

对比之前，首先想先搞明白，那么上一代是啥：redux。由此衍生出来的dva、rematch都是redux的思想，通过数据流框架来优化代码的组织结构的产物。归纳下就是 action，dispatch，connect，reducer，useStore，Provider，Context 这些东西，然后再其上些做排列组合。概念不少，学习成本不低。所以，什么是下一代？，得至少得满足跟上一代得组合要素不同这个基本条件。

1、背后团队对比

Recoil来自Fb官方实验项目。hox来自蚂蚁金服体验技术部。两位背后的爸爸都有丰富的实战经验。

2、start 总数

截止发稿日期 Recoil: 4.9k , hox:364 ，但笔者认为星星不是衡量一个项目的标准，有很多方案，为解决某些特定问题而生，往往曲高和寡，星星少的可怜，加上国内现存的react项目数据流多都是redux时代的dva、rematch的忠实客户，重写数据流往往意味着代码完全重构。大家看vue星星很快很多，因为强框架，脚手架，使用简单，学习成本低，也适合各类培训机构，所以星星自然多了，但从虚拟Dom的diff 到 hook ，React一直都是行业的创新领导者。

3、思想对比

都是订阅和Hook的两者结合方法。解决了 context 状态的传导需要过多的provider 嵌套的问题。

4、API对比

hox 仅仅1个API， Recoil 11个API。学习成本上，hox吊打Recoil...

5、文档对比

Recoil有官方文档，详细介绍其设计原理; hox 相关思想的介绍，资源较少，可能API 太简洁，1页ReadMe就能讲看明白的东西，为什么要做个网页...通过通读源码能取到点真经，这点上看，Recoil吊打Hox。

6、应用场景对比

Recoil ModeL的定义及使用；

import {atom, useRecoilState} from 'recoil';
 
const counter = atom({
  key: 'myCounter',
 default: 0,
});
 
function Counter() {
 const [count, setCount] = useRecoilState(counter);
 const incrementByOne = () => setCount(count + 1);
 
 return (
 <div>
      Count: {count}
 <br />
     <button onClick={incrementByOne}>Increment</button>
 </div>
 );
}

hox Model的定义及使用

任意一个 custom Hook ，用 createModel 包装后，就变成了持久化，且全局共享的数据。
import { createModel } from 'hox';

/* 任意一个 custom Hook */
function useCounter() {
  const [count, setCount] = useState(0);
  const decrement = () => setCount(count - 1);
  const increment = () => setCount(count + 1);
  return {
    count,
    decrement,
    increment
  };
}

export default createModel(useCounter) createModel 返回值是个 Hook，你可以按 React Hooks 的用法正常使用它。

import { useCounterModel } from "../models/useCounterModel";

function App(props) {
  const counter = useCounterModel();
  return (
    <div>
      <p>{counter.count}</p>
      <button onClick={counter.increment}>Increment</button>
    </div>
  );
}

useCounterModel 是一个真正的 Hook，会订阅数据的更新。也就是说，当点击 “Increment” 按钮时，会触发 counter model 的更新，并且最终通知所有使用useCounterModel 的组件或 Hook。

总结：model的定义和使用上，recoil 通过atom包装原生的object。hox 拥抱了是原生的hook。两者都贴近原生。都很不错。

状态复用 recoil 通过 selector 选择多个atom定义的state，然后计算下，输出到订阅更新的组件中。

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
 default: 32,
});
 
const tempCelcius = selector({
  key: 'tempCelcius',
 get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
 set: ({set}, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
});
 
function TempCelcius() {
 const [tempF, setTempF] = useRecoilState(tempFahrenheit);
 const [tempC, setTempC] = useRecoilState(tempCelcius);
 
 const addTenCelcius = () => setTempC(tempC + 10);
 const addTenFahrenheit = () => setTempF(tempF + 10);
 
 return (
 <div>
 Temp (Celcius): {tempC}
 <br />
 Temp (Fahrenheit): {tempF}
 <br />
 <button onClick={addTenCelcius}>Add 10 Celcius</button>
 <br />
 <button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
 </div>
 );
}

hox通过hook的复用，来实现复用。纯原生..

import { useCounterModel } from"./useCounterModel";  
export functionuseCounterDouble() {   
    const counter = useCounterModel.data;  
 return {
    ...counter,  
    count: counter.count * 2
   }; 
}

两者复用的区别，在于 hox 通过hook来复用，Rcoil的使用方式需要两个API的组合，较为繁琐。这点上hox优于Rcoil。

笔者向hox团队建议扩展API，支持默认值输入后，这种纯逻辑的复用性，在Recoil里需要一个额外的初值，和一个额外的selector 才能实现。

import { createModel } from'hox';  
/* 任意一个 custom Hook */
import { createModel } from 'hox';
import { useBoolean } from '@umijs/hooks';
// 比如toggle的类应当具有通用性
function useToggle(defValue) {
  const { state, toggle, setTrue, setFalse } = useBoolean(defValue ?? true);
  const set = (bool) => (bool ? setTrue : setFalse)
  return { state, toggle, set }
}

export const useSiderMenuToggleModel = createModel(useToggle,true);
export const useTabsToggleModel = createModel(useToggle,false);

Recoil剩下还有9个API，都是一些业务细节API，不影响对比，时间上 hox和Rcoil 都能轻松应付以下场景：

Flexible shared state: 在 react tree 任意的地方都能灵活共享 state Derived data and queries: 高效可靠地根据变化的 state 进行计算 App-wide state observation: time travel debugging, 支持 undo, 日志持久化

综上所述，hox 和 Rcoil都和上一代的数据流组织元素完全不同。完全配的上下一代的称呼。至于学习使用，hox 目测优于 Rcoil.