React-Redux与Vuex使用对比

React 与 Vue 是我们熟悉的两大前端主流框架，来自官方的解释, Vue是一套用于构建用户界面的渐进式框架 , React是一个用于构建用户界面的JavaScript库 ,两个框架都使用各自的语法，专注于用户UI界面的构建那我们会有疑问，这两个框架都专注于UI界面的构建，但是随着JavaScript单页应用开发日趋复杂，我们如何进行更多数据的管理呢？比如网络请求的数据、缓存数据、本地生成尚未持久化到服务器的数据，UI状态数据，激活的路由，被选中的标签等等 基于上面的疑问，两个框架都有各自的解决方案： React-Redux 与 Vuex

使用 react-redux 之前我们先来了解一下 Redux 。 Redux 是 JavaScript 状态容器，提供可预测化的状态管理， Redux 由 Flux 演变而来,当然除了和 React 一起用外，还支持其它界面库，不过我们这里主要介绍它配合React进行使用先来了解下它的几个核心概念：

你可以把 action 理解为一个描述发生了什么的指示器。在实际应用中，我们会 dispatch(action) ,通过派发action来达到修改state的目的。这样做的好处是可以清晰地知道应用中到底发生了什么。

使用 Redux 进行数据管理时有三个原则需要注意

react-redux 是 Redux 官方提供的 React 绑定库他的使用也遵循上面的redux原则。

通过上面的流程图可以很清晰的明确 Redux 的使用：

Vuex 是一个专为 Vuejs 应用程序开发的 状态管理模式 + 库 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它主要用来解决 多个组件共享状态 的问题。

Vuex 跟 Redux 的数据管理模式很相似，如果理解 Redux ,那么 Vuex 也很容易理解了，只不过 Vuex 是专门为 Vuejs 设计的状态管理库，使用起来要更加方便。

在Vue组件中我们使用 storestatea, storestateb 来分别获取两个模块的状态

通过对比 React Redux 与 Vuex 可以发现，两者的封装与使用有很大的相似性，它们都借鉴了 Flux 的设计思想，通过使用对比可以让我们更容易掌握他们。

一些参考：

Vuex

Redux中文文档

一、CMS管理系统功能
CMS是Content Management System的缩写，意为"内容管理系统"。
CMS都有可能包括些什么？
隐藏在内容管理系统(CMS)之后的基本思想是分离内容的管理和设计。页面设计存储在模板里，而内容存储在数据库或独立的文件中。 当一个用户请求页面时，各部分联合生成一个标准的HTML（标准通用标记语言下的一个应用）页面。
一个内容管理系统通常有如下要素：
文档模板
脚本语言或标记语言
与数据库集成
内容管理系统也简化了网站的内容供给和内容管理的责任委托。很多内容管理系统允许对网站的不同层面人员赋予不同等级的访问权限， 这使得他们不必研究 *** 作系统级的权限设置，只需用浏览器接口即可完成。
内容管理系统被分离成以下几个层面：各个层面优先考虑的需求不同
1，后台业务子系统管理（管理优先：内容管理）：新闻录入系统，全文检索子系统等，针对不同系统的方便管理者的内容录入：所见即所得的编辑管理界面等，清晰的业务逻辑：各种子系统的权限控制机制等；
2，前台发布（效率优先：发布管理）：面向最终用户的缓存发布
可以通过WEB实现一套完整的CMS管理系统，用于对PC网站和移动端浏览内容的增、删、改、查等 *** 作，通过对模板内容的修改即可改变网页展示内容，方便了网站管理人员的日常管理和 *** 作。
二、One Page One Application
1定义
One Page, One Application(后面缩写为OPOA，或者1P1A)， 含义很简单：一个页面就是一个应用。不再使用iframe, 页面提交不能再使用submit方式。网页中发生的 *** 作和交互都在当 前页面进行。
在 众多的基于Web的MIS系统中，没有人关心页面的组织形式；大多数稍微复杂的MIS系统，都采用分祯(Frame)的方式来组织页面，这样，在进行业务 *** 作的时候，url的变化表现在一个框架页面内，从浏览器的地址看起来，只有一个地址；更有甚者，一些应用干脆d出一个去掉了浏览器菜单、工具条、地址 栏、状态栏的窗口（比如招商银行、民生银行的网上银行系统），连地址都看不见。因此，一个页面就是一个应用，从用户的角度来说，对于 *** 作型系统，是一种非 常自然的体现。用户无需了解每一个具体的 *** 作对应的地址是什么。
这种设计背后的含义实际是：是希 望由程序来控制用户的行为，还是反过来。在 *** 作型系统中，每一步的 *** 作往往被业务含义严格定义，无论是应用的设计者，还是其使用者，都希望在一种受控的状 况下来进行 *** 作。例如，一个审批动作，用户更希望是通过一个按钮来触发，而不是访问类似于/approveactionitemid=123的方式。
这样的好处是：很多东西，例如：JS，CSS，HEAD等整个系统都只需加载一次。加快响应速度。客户体验也有所提高，不再d出窗口，不再整个页面进行刷新。
2场景（内容管理系统更倾向明确的URL定位页面）
显然，OPOA的设计只能针对那些对URL不敏感的系统，或者说 *** 作型系统。绝大多数MIS系统都属于这一范畴，Email系统也是这一范 畴，其他领域，如监控系统，聊天室等都可以采用这种思路。反面的例子是，对于内容型系统，如新闻系统，Blog系统，论坛系统，用户更希望能够通过一个明 确的URL来定位页面内容，搜索引擎也喜欢这种地址。这种应用需要的是一个合理，易懂，明确的地址。
3设计与实现
注意到上述的OPOA地实现只是对用户而言，看起来好像是一个页面一样，但实际上还是有众多的action， page在后面工作。
三、react的技术准备
1react的起源
React 起源于 Facebook 的内部项目，意在解决随时间数据不断变化的大规模应用程序开发，react可以表现出应用程序在任何时间点的样子，底层数据改变时，react的虚拟DOM机制会自动重新渲染，更新界面。
2对react的认识
React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；
React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；
React的虚拟DOM原理：在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行 *** 作。而复杂或频繁的DOM *** 作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM *** 作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的 机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前 整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟 DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行 *** 作的仅仅是 Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要 关心在任意一个数据状态下，整个界面是如何Render的。
jsx语法：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。jsx语法与javascript并不兼容，需要通过babel-loader来解析。
组件化：构建可组合的组件（组件：对数据和方法的简单封装，封装起来的具有独立功能的UI部件），是代码复用、测试和关注分离。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义 成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。
React认为一个组件应该具有如下特征：
（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；
（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；
（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

首先：React本身没有独有的获取数据的方式。实际上，就React而言，它甚至不知道有服务器画面的存在。 React只是简单地渲染组件，单独从两个地方获取数据：props 和 state。 因此，为了使用服务器的数据，你需要在你的组件（component）的props或

Nextjs 是一个 React 框架，用于构建服务器渲染的应用程序。要解决 Nextjs 应用程序的高并发问题，可以考虑以下几个方面：
1 使用缓存：为了提高响应速度和处理效率，可以使用缓存来存储常用的数据和页面内容。可以使用内存缓存、分布式缓存等不同的缓存策略来减少网络访问和数据库查询次数，从而提升应用程序的性能。
2 使用负载均衡：可以使用负载均衡器将请求分配到多台服务器上，在扩展应用程序的同时确保高可用性和稳定性。可以使用硬件负载均衡器或软件负载均衡器来实现，例如，Nginx、HAProxy 等。
3 使用 CDN：可以使用 CDN（内容分发网络）来加速静态资源的传输和加载，减少请求对服务器的压力。可以将静态资源（如、样式表、脚本等）缓存在 CDN 上，并通过 CDN 调用来提供服务。
4 预渲染静态页面：在 Nextjs 中，可以使用“静态生成”或“服务器端渲染”来生成 HTML 页面。如果应用程序的内容和数据不经常变化，则可以通过预渲染静态页面来减轻服务器的负担，加快页面的加载速度。
5 使用缓存策略控制头文件：>