React 下一代数据流 hox vs Recoil 使用对比分析

       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}>Incre