redux

我是要介绍一个新的 react 全局共享状态管理器，它和 vue 组件的状态管理一起同工之妙。 马上体验 在 react 状态管理领域，react-redux 可谓是只手遮天了，基于 flux 思想实现，小巧，immutable 的思想让数据变化可控。但 immutable 所带来的编程代价太大了，如果你要更新一个深层结构的对象的某个节点，写作将会是极其麻烦的一件事，而且还保不准会出错。为了保证 immutable，redux 的 reducer 机制让开发者掉光了头发。于是有了类似 dva、rematch 等这样的项目，这些项目基于 redux 再做了一层封装，让开发者少写了很多 reducer 相关的代码，但是很无奈，immutable 的特性，让开发需要付出更多的精力来控制每一个更新。 再另一个世界，mutable state 其实也非常优秀。知名的 mobx 推出了 mobx-react 和 react-redux 竞争。然而，原本非常优秀的 mobx 却只管把自己的想法强加于人，而忽视了代码写作的便捷性，总之，使用起来虽然不用再为 reducer 头疼，却对组件的侵入和让人很不适应。你需要了解它的概念，特别是基于观察者模式的很多概念，它提供的 api 的形式也很丰富，基于接口的、装饰器的，总之，你在掀开它的魔法盒子时，会忍不住“wo\cao/”

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架，是蚂蚁金服的底层前端框架，已直接或间接地服务了 600+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。（具体可前往Umijs官网进行查看 https://umijs.org/） dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。（ https://dvajs.com/guide/） 首先搭建umi+dva前端开发环境： ###第一步：创建一个项目文件夹 ###第二步：使用命令行创建umi应用： yarn create umi 选择->app,按回车进行下一步 选择项目中是否需要使用typescript语言，看个人情况进行选择 ###第三步：选择项目中使用的插件，这里是具体情况而定，本项目选择antd 前端UI框架，dva插件以及code-spliting代码分割插件。注意这是多选，使用空格键进行选择，按回车键进行下一步。 ###第四步：安装项目中所需依赖 yarn install / npm install ###第五步：cesium插件安装。 yarn add cesium / npm

摘要 以React技术栈为主分享我们在大规模企业应用建设过程中遇到的问题，对前后端分离架构的思考，前后端分离的技术方案，前后端分离过程中的实践经验，前后端分离带来的效果与价值，以及目前存在的问题与未来可能的尝试。 应用的现状 我们的应用拥有接近100w的用户、3K+的QPS、5亿+的单表数据、万亿级别的资金流，但是同样也面临着诸多问题。 首先是颜值低，换肤受限、无法集成更好的前端框架和组件。然后是前后端的高度耦合使得无法快速的响应业务变化，维护成本也随着应用规模不断攀升，性能方面也受到限制，沟通成本提高。其次是无法跨终端，渲染和跳转强依赖于后端，业务逻辑分散。最后就是强状态性，应用中很多的数据是与用户的会话绑死的，由此造成没有水平伸缩的能力，智能化、自动化、服务化同样受限。 我们经过思考认为理想的状态应该是这样的，前端方面具备高颜值、个性化、多渠道、多终端的特质；而在后端上需要能做到微服务化、水平伸缩、高可用、自动化甚至智能化。 解决方案-前后端分离 定义 在之前的应用中后端是Java，前端是Browser（浏览器）。但是现在Node出现了，它被包含在大前端中用来替换原来的MVC部分，这样后端就可以脱离出来处理纯服务化的部分，前端也可以专注于纯前台的领域。 各自的职责 前端方面Browser负责数据的展现和收集、事件的响应和处理、DOM的操作、请求的发送和响应的处理

接着前面的内容： https://www.cnblogs.com/yanggb/p/12682902.html 。 状态管理 类Flux状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中，大型应用的复杂度也经常逐渐增长。为了解决这个问题，vue提供了vuex：受到Elm启发的状态管理库。vuex甚至被集成到vue-devtools中，无需配置即可进行时光旅行调试（time travel debugging）。 如果你是来自React的开发者，你可能会对vuex和redux之间的差异表示关注。redux是react生态环境中最流行的flux实现，redux事实上无法感知视图层，所以它能够轻松地通过一些简单的绑定与vue一起使用。vuex的区别在于它是一个专门为vue应用设计的状态管理工具，使得它能够更好地与vue进行整合，同时提供简洁的api和改善过的开发体验。 简单状态管理起步使用 一个经常被忽略的细节是，vue应用中原始的data对象的实际来源——当访问数据对象的时候，一个vue实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享： var sourceOfTruth = {} var vmA = new Vue({ data: sourceOfTruth }) var vmB = new Vue({ data