你有 一个全球性的商店 您的数据存放在哪里. 无论何时需要更新存储，都可以调度 一个动作 这就是 减速机的. 根据操作类型的不同，reducer会以不可变的方式更新状态.

要在反应中使用回来的，您需要通过反应 - 回来的将组件订阅到存储更新.

回来的 API示例

切片是回来的代码库的基本部分，它区别于其他工具. 切片包含操作和reducer的所有逻辑.

/ /片/计数器.js
从“@reduxjs/toolkit”中导入{createSlice};

导出const切片= createSlice({
  名称:“计数器”,
  initialState: {
    值:0
  },
  还原剂:{
    increment: (状态) => {
      状态.Value += 1;
    },
    decrement: (状态) => {
      状态.Value -= 1;
    }
  }
});

导出const 行动 = slice.行动;
导出const reducer = slice.减速机;


/ /存储.js
从“@reduxjs/toolkit”中导入{configureStore};
导入{reducer作为计数器Reducer}./片/计数器”;

导出默认配置恢复({
  减速机:{
    柜台:计数器Reducer
  }
});


/ /索引.js
从“反应”中导入反应
从“react-dom”中导入反应DOM
从“react-redux”中导入{Provider}
导入应用程序./应用程序
从'导入存储'./存储的

反应DOM.呈现(
  
    
  ,
  文档.getElementById(根)
)


/ /应用程序.js
从“反应”导入反应;
从“react-redux”中导入{useSelector, useDispatch};
导入{行动}./片/计数器”;

const App = () => {
  const count = useSelector((状态) => 状态.计数器.值);
  const dispatch = useDispatch();

  回报(
    

      

         dispatch(行动.increment())}>Increment
        {count}
         dispatch(行动.decrement())}>Decrement
      
    
  );
};

导出默认App;

质量属性

• 可用性. 回来的变得非常简单 官方工具包包. 您创建了一个切片(初始状态的组合), 异径接头, 和行为), 把它递给商店, 并通过钩子在组件中访问它. RTK Query的加入使回来的 Toolkit成为可能 更有用 通过处理标准数据查询.
• 可维护性. 回来的很简单. 它不需要深入的知识来理解如何增强或修复某些东西.
• 表演. 回来的的主要性能影响因素是 软件工程师. 回来的是一个没有太多逻辑的简单工具. 如果您看到状态更新缓慢，则可以跟踪 官方指导方针 让它们更快.
• 可测试性. 回来的由纯函数(操作和reducer)组成，这使得它非常适合单元测试. 它还提供 的机制 编写存储、操作和reducer一起工作的集成测试.
• 可伸缩性. 默认情况下，回来的只有一个全局状态，这使得它难以扩展. 然而，图书馆 redux-dynamic-modules 支持创建模块化reducer和中间件.
• 可修改性. 定制回来的是一件毫不费力的事情，因为它支持 中间件.
• 可重用性. 回来的与框架无关，因此它在可重用性方面非常出色.
• 生态系统. 回来的了 巨大的生态系统 有用的附加组件、库和工具.
• 社区. 回来的, 在我们的比较中最古老的状态管理库, 已经积累了一个拥有重要知识库的大型社区. 带有redux标签的问题有34000个(回答了26000个) 堆栈溢出.
• 脉冲. 回来的仍然定期更新和维护, 但随着项目的成熟，开发速度总体上有所放缓

MobX

MobX 是另一个相对较老的库，在GitHub上有~25,800颗星. 它与回来的的不同之处在于它遵循OOP范式并使用可观察对象. MobX是由 米歇尔Weststrate 它目前由一群开源爱好者在波士顿的帮助下维护 Mendix.

< / div >

在MobX, 在构造函数中创建一个带有makeObservable调用的JavaScript类 可观察到的商店 (如果你有合适的加载器，你可以使用@observable装饰器). 然后声明属性(状态)和方法(行动 和 计算的值)的班级. 组件订阅这个可观察存储来访问状态, 计算值, 和行动.

MobX的另一个重要特性是 可变性. 它允许在您想要避免副作用的情况下静默地更新状态.

MobX API示例

MobX的一个独特之处在于，您可以创建几乎纯ES6类，其中隐藏了所有的魔力. 它需要较少的特定于库的代码，以便将注意力集中在逻辑上.

/ /存储/计数器.js
从“mobx”中导入{makeautooobservable};

类CounterStore {
  值= 0;

  构造函数(){
    makeAutoObservable(这个);
  }

  增加(){
    这.Value += 1;
  }

  减量(){
    这.Value -= 1;
  }
}

导出默认的CounterStore;


/ /索引.js
从“反应”导入反应;
从“react-dom”中导入反应DOM;
从“mobx-react”中导入{Provider};
导入App./应用程序”;
从“./商店/计数器”;

反应DOM.呈现(
  
    
  ,
  文档.getElementById(“根”)
);


/ /应用程序.js
从“反应”导入反应;
从mobx-react中导入{inject, observer};

const App = inject((stores) => ({ 计数器: stores.柜台}))(
  observer(({ 计数器 }) => {
    回报(
      

        

           计数器.increment()}>Increment
          {计数器.value}
           计数器.decrement()}>Decrement
        
      
    );
  })
);

导出默认App;

质量属性

• 可用性. 可观察存储是状态管理的单一入口点. 它使MobX的使用变得简单，因为您只有一个地方可以修改.
• 可维护性. 这是一个相当大的缺点. 如果不了解RxJS API，您将无法获得期望的结果. 在不合格的团队中使用MobX可能会导致状态不一致的问题.
• 表演. MobX由独立的商店组成，使您能够订阅您需要的唯一商店. 非常有效.
• 可测试性. 可观察对象存储是普通的JavaScript对象，其中隐藏了响应功能. 测试与任何其他JavaScript类的测试相同.
• 可伸缩性. Observable stores are split logically; there is no difficulty in scaling MobX.
• 可修改性. MobX允许创建带有修改行为的自定义可观察对象. 另外，还有一个概念叫做反应. 反应模型自动副作用. 这些东西使MobX非常可定制.
• 可重用性. MobX与框架无关，因此它在可重用性方面非常出色.
• 生态系统. 有 数百个扩展 适用于MobX.
• 社区. MobX拥有众多忠实粉丝. 有大约1800个问题(大约1100个回答)带有mobx标签 堆栈溢出.
• 脉冲. MobX定期更新和维护，与回来的一样，已经达到成熟阶段.

反冲

反冲 是反应团队的最新产物. 它背后的基本思想是missing的一个简单实现 反应特性 比如共享状态和派生数据.

您可能想知道为什么要为企业级项目审查实验性库. 反冲得到了Facebook的支持，并被用于Facebook的一些应用程序中, 并在反应中带来了一种全新的共享状态的方法. 我敢肯定，即使反冲被弃用，另一个工具也会遵循同样的路径，比如 Jotai，将获得关注。.

后坐力建立在两个条件之上: 原子 和 选择器. 原子是一个共享状态块. 组件可以订阅一个原子来获取/设置它的值.

< / div >

如图所示，当值发生变化时，只会重新呈现订阅的组件. 它使后坐力非常高效.

反冲的另一个优点是 选择器. 选择器是从原子或其他选择器聚合的值. 对于消费者来说, 原子和选择器之间没有区别——它们只需要订阅一些反应部分并使用它.

< / div >

当一个原子/选择器被改变时，使用它的选择器(例如.e.(被订阅)被重新评估.

后坐力API示例

反冲的代码与其竞争对手有很大的不同. 它基于反应钩子，更关注状态结构，而不是改变状态.

/ /原子/计数器.js
从"recoil"中导入{原子};

const 计数器Atom = 原子({
  关键:“计数器”,
  默认值:0
});

导出默认的计数器Atom;


/ /索引.js
从“反应”导入反应;
从“react-dom”中导入反应DOM;
从“recoil”中导入{反冲Root};
导入App./应用程序”;

反应DOM.呈现(
  <反冲Root>
    
  ,
  文档.getElementById(“根”)
);


/ /应用程序.js
从“反应”导入反应;
从“recoil”导入{use反冲State};
import 计数器Atom./原子/计数器”;

const App = () => {
  const [count, setCount] = use反冲State(计数器Atom);

  回报(
    

      

         setCount(count + 1)}>Increment
        {count}
         setCount(count - 1)}>Decrement
      
    
  );
};

导出默认App;

质量属性

• 可用性. 反冲是最容易使用的工具之一，因为它像反应中的useState一样工作.
• 可维护性. 在反冲中，您所要做的就是在组件中维护选择器和钩子——更多的价值, 更少的样板.
• 表演. 反冲在反应之外构建一个状态树. 状态树使您能够只获取和收听您需要的内容, 不是整棵树的变化. 它在引擎盖下也得到了很好的优化.
• 可测试性. 反冲提供 一种机制 用于测试它的原子和选择器.
• 可伸缩性. 分裂成多个独立部分的状态使其具有特别的可扩展性.
• 可修改性. 反冲只负责存储值及其聚合. 它没有数据流，因此可以很容易地进行定制.
• 可重用性. 反冲依赖于反应. 它不能在其他地方重复使用.
• 生态系统. 目前还没有适合《欧博体育app下载》的生态系统.
• 社区. 后坐力还很新鲜，不足以形成一个庞大的社区. 有大约200个问题(回答了大约100个)带有recoiljs标签 堆栈溢出.
• 脉冲. 反冲经常更新，与回来的和MobX相比，在GitHub上有最开放的问题.

哪种工具可以实现反应的最佳状态管理?

当涉及到企业级应用程序时，这些反应全局状态管理库提供了不同的优缺点.

反冲还很年轻，但目前还没有社区和生态系统. 尽管Facebook正在开发它，而且它的API看起来很有前景, 一个庞大的反应应用不能依赖于一个社区支持薄弱的库. 此外，这是实验性的，使其更加不安全. 对于今天的反应企业应用来说，这绝对不是一个好的选择，但值得关注.

MobX和回来的没有这些问题，市场上的大多数大公司都在使用它们. 让他们彼此不同的是他们各自的学习曲线. MobX要求对响应式编程有基本的了解. 如果参与项目的工程师不够熟练, 应用程序可能以代码不一致告终, 性能问题, 增加了开发时间. 如果您的团队意识到反应性，MobX是可以接受的，并且将满足您的需求.

回来的也有一些问题，主要是关于可伸缩性和性能. 然而，与MobX不同的是，这些问题都有经过验证的解决方案.

考虑到每一个优点和缺点, 考虑到我的个人经历, 我推荐回来的作为反应企业级应用程序的最佳选择.

< / div >< / div >< / div >< / div >

关于总博客的进一步阅读:

• 简单的反应 UI测试
• 反应 SEO策略和最佳实践
• 反应测试驱动开发:从用户故事到生产
• 使用反应 Hooks和TypeScript
• 经过测试的解决方案:使用反应设计模式
• 用反应开发者工具揭秘调试

< / div >

了解基本知识

• 状态管理在反应中是必要的吗?

  是的，状态管理在反应中是必要的. 事实上, 使用适当的状态管理库是至关重要的，因为反应状态的任何变化都会立即显示给用户

  < / div >< / div >

• 哪种状态管理在反应中是最好的?

  反应的useState是本地状态管理的最佳选择. 如果您需要全局状态解决方案, 最流行的是回来的, MobX, 以及内置的上下文 API. 您的选择将取决于您的项目的规模、您的需求和您的工程师的专业知识.

  < / div >< / div >

• 如何在反应中维护全局状态?

  如果保持全局状态干净，维护全局状态很容易. 它应该只包含那些在多个松散连接的组件之间共享的项.

  < / div >< / div >

• 为什么不使用反应 上下文 API?

  上下文API的功能很小. 它不是为高频更新而构建和优化的，而是为主题更新和认证管理等低频更新而构建和优化的.

  < / div >< / div >

• 回来的需要很多样板代码吗?

  不，回来的不需要很多样板文件. 随着官方回来的 Toolkit的引入, 在回来的中描述状态管理已经变得简洁.

  < / div >< / div >

• 我应该怎么做才能精通MobX游戏?

  MobX是用RxJS实现的全局状态管理. 如果你想成为高手，学习RxJS. 它不仅有助于理解单个库, 也适用于整个反应性的概念.

  < / div >< / div >

• 反冲生产准备好了吗?

  即使在实验阶段，后坐力也表现良好. 这对于大型应用程序来说并不理想, 但对于一个不太依赖政府的小银行来说，这将是有用的.

  < / div >< / div >

< / div >< / div >

标签

• 反应
• 回来的
• StateManagement

< / div >< / div >< / div >< / div >

聘请Toptal这方面的专家.< / div >现在雇佣< / div >< / div >

< / div >

< / div >

Teimur Gasanov

验证专家 在工程< / div >< / div >< / div >

比什凯克，Chuy省，吉尔吉斯斯坦

2018年5月1日成为会员

< / div >< / div >< / div >

作者简介

Teimur是反应的导师，也是Toptal核心团队的高级前端工程师.

< / div >显示更多< / div >

---

作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.< / div >

专业知识

反应.js回来的< / div >< / div >

以前在

< / div >< / div >

雇佣Teimur< / div >< / div >< / div >

< / div >< / div >

< / div >