背景

我相信很多朋友跟我一样,初次听到什么FluxRedux, Vuex状态管理的时候是一脸懵逼的。因为在外面之前前端大部分开发的时候,根本没有那么多的概念。自从ReactJS火爆后,什么Flux, Redux,React全家桶是一套一套接踵而来。搞的很多开发者甚是头大。所谓的ReactJS全家桶即ReactJS + Redux + Webpack, 当然其中的Redux可以用其他例如Mobx之类的替换。原本可能只是很简单的一些数据展示需求,当想用尝试使用ReactJS时,去Google搜索了一些教程,突然发现怎么用个React需要这么多东西。正如今年比较有名的一篇文章里面描述的那样 — ”在2016年学习前端是怎样一种体验"

很显然,时代在进步,技术在进步,Web业务需求在进步,浏览器性能的大幅度提升,促使JS能处理越来越多的事情。为了满足越来越复杂、丰富的WebApp需求,越来越多的原本后端处理的业务逻辑开始转移到前端来处理,同时更多复杂的前端业务在浏览器上面催生,原有的很多技术体系、解决方案已经不能很好的支撑这些越来越复杂的需求了。所以当我们在面临各种业务需求的时候,必定会出现各种各样的适合不同业务需求的技术解决方案。

很多朋友刚刚上手React的时候,被什么Redux, 函数式都搞的有点摸不着头脑。因为之前很多时候写前端用一个jQuery就足矣,当转换到ReactJS时,忽然多出了个Webpack, Redux, 然而Redux里面又包含了什么ReducerActionState管理函数式等等概念, 搞的人的确很头大。前期较高的学习成本,造成了很多朋友就放弃了ReactJS的选型。而且很多开发者初期并不了解这些框架所解决的问题,缺乏足够的实践经验,造成很多人误认为这是把简单的问题越搞越复杂。可能大家回想本来很简单的问题,我用个jQuery就能搞定,甚至纯手撸原生Javascript都可以,怎么突然多出了这么多东西。例如ReactJS只是单纯的View层的解决方案,而Redux是一种状态管理框架,不仅支持ReactJS,还支持Angularjs, 官方宣称的是它可以支持任务其他的视图库。正因越来越复杂的前端需求,层出不穷的前端解决方案和技术的推陈出新,造就了前端社区异常火爆的局面。而本文主要探讨前端的状态管理(State Management)

服务端渲染的WEB开发

服务端渲染图示

就在几年前,前端工程师的大部分工作,可能还停留在利用CSS, HTML切页面,然后利用JS做些简单的动态交互,更进一步的前端开发者可能需要懂Java, 或者PHP之类的语言,因为需要将写好的页面与模板引擎完成整合。

用服务端语言(例如NodeJS, Java, Python, Ruby, PHP等等)写过Web的朋友应该都很清楚,以前大部分时候我们写的Web,尤其经典的MVC模型。多年以前,那会还不流行前后端分离式的开发,虽然Ajax技术已经很流行,但是Web页面的功能和交互并没有那么复杂。大部分的页面点击一个连接,即请求到服务器,服务器控制路由(Router)决定响应的View,服务器将数据库获取的数据Model与HTML模板结合,然后生成HTML页面响应到浏览器。那时候Web大部分的业务都是服务器直接处理的,很多所谓的状态管理也都是服务端直接操作操作缓存(Cache)或者数据库来完成的。所以那时候的前端并没有太多的所谓的状态需要管理,顶多大家有时候会在内存里面用一全局对象,来处理些简单的数据共享。随着Web前端的发展,越来越多的后端工作转移到了前端,数据的共享,同步变的异常复杂和麻烦,所以这个时候急需这种完善的状态管理解决方案的出现。

前后端分离的单页应用(SPA)

单页应用与服务器端交互图示

单页应用(Single Page Application)

利用Ajax做单页应用,经典的案例肯定就是Gmail了。早期可能大家都还用iframe这种古老的子页面加载方案,随着Ajax技术的愈发成熟和盛行,后来越来越多的Web应用开始利用浏览器Hash做路由转发,Ajax做页面加载 的方式写无跳转状态的Web应用(即单页应用。后来便有了类似BackboneAngularjs为代表的MVVM前端框架的诞生。

浏览器越来越快的访问性能,早就了越来越多的PC应用开始WebApp化,很多时候我们不需要安装某个应用,只需要简单的输入一个URL地址,便可以轻松访问我们需要的服务,相信很多朋友已经在使用Chrome上很多强大的Web应用了。越来越多的Web开始想靠近类似于Native应用化的体验,所以SPA这种类型的Web开发越来越受欢迎,典型的就是我们常常开发的后台管理应用了。

组件化与状态管理(Web Component And State Management)

组件直接的数据共享

Web组件化(Component)一个是被聊透了的话题了,它的益处无需多言,更好的编码效率,更好的代码阅读性,维护性,补充HTML5语义化标签的不足。然而,正因为在开发越来越复杂的SPA时,开始将各个页面开始模块化,页面公告模块组件化,一个页面拆分成多个子组件,组件的不断复用和重新组合,之前简单的组件端到端(组件到服务器端)的数据请求变的复杂和多余,单个数据源经常在不同页面但相同组件中共享,各种路由信息(Routing)需要处理。

我们可以想象一下,当一个页面中,相同的组件获取来自同一个接口的数据,这就意味着组件共享的是相同的数据Model。 正常逻辑下,其中一个组件如果进行了Model更新操作,服务器数据库的数据即相应的发生了改变,但是其他相同数据接口的组件,由于组件直接是相互隔离的,数据Model并不是同一个,所以组件与组件直接的数据通信便成为了一个很大的问题。当然,我们有个粗暴的解决方案,就是,在某个组件更新完数据后,我们重新reload整个页面,可这个时候整个原本想达到的SPA效果就没有了,体验大减,而你打开Network检测工具,你会发现整个页面发送了多个重复的接口请求,这无疑造成了很大的性能损失和资源浪费。所以才会出现Redux,Vuex这种专门针对状态管理的技术方案。

总结

总而言之,并不是所有的Web应用和使用场景都需要添加状态管理,很多时候服务端渲染任然是更好的选择,而是否需要添加状态管理框架,是用Redux,还是Mobx, 我们可以根据自己的业务实际情况和技术团队的偏好而添加,而有些情况下,自己创建一个全局对象可能是更适合的选择。有的人可能觉得Redux这种函数式编程的方式让人难以理解,那么你也可以选择Mobx这种面向对象编程思维的状态管理框架。如果你觉得React这种骑术门槛太高,适应能力差,我觉得VueJS, Vuex可能是更适合你的选择。

说了这么多,希望自己能解释清楚前端状态管理是怎么一回事。

原文地址http://imziv.com/blog/article/read.htm?id=80

Web前端的状态管理(State Management)的更多相关文章

  1. Web前端的状态管理

    背景 我相信很多朋友跟我一样,初次听到什么 Flux ,  Redux ,  Vuex , 状态管理 的时候是一脸懵逼的.因为在外面之前前端大部分开发的时候,根本没有那么多的概念.自从ReactJS火 ...

  2. angular2 学习笔记 ( 状态管理 state management )

    更新 : 2017-12-29  ng5 移除 zone.js https://zhuanlan.zhihu.com/p/29577461 zone 的用途就是拦截游览器事件, 比如 click, a ...

  3. vuex状态管理,state,getters,mutations,actons的简单使用(一)

    之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...

  4. 组件之间的通讯:vuex状态管理,state,getters,mutations,actons的简单使用(一)

    之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...

  5. React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson17 转载请注明出处,保留原文链接和作者信息. 上一个评论功能的案例中,可能会有些同学会对一个 ...

  6. asp.net 的状态管理

    状态管理 (state management) 在Web应用程序中,一向是很重要的课题,良好的状态管理可以帮助开发人员发展出具有状态持续能力的应用程序(像是工作流程型应用程序或是电子商务应用程序),但 ...

  7. saltstack(五) saltstack的state状态管理

    一,YAML语法 首先先了解一下YAML,默认的SLS文件的renderer是YAML renderer.YAML是一个有很多强大特性的标记性语言.Salt使用了一个YAML的小型子集,映射非常常用的 ...

  8. State management(状态管理)

    State management https://en.wikipedia.org/wiki/State_management UI控件的状态管理, 例如按钮的灰化.只读.显示隐藏等. 特殊地一个控件 ...

  9. Sentry 开发者贡献指南 - 前端 React Hooks 与虫洞状态管理模式

    系列 Sentry 开发者贡献指南 - 前端(ReactJS生态) Sentry 开发者贡献指南 - 后端服务(Python/Go/Rust/NodeJS) 什么是虫洞状态管理模式? 您可以逃脱的最小 ...

随机推荐

  1. 如何使用Less?

    LESS是动态样式语言,赋予CSS动态语言的特性,如变量.继承.运算.函数,使得CSS更方便编写与维护.>>官网 less @color:#ff0000; body{color:@colo ...

  2. [Android Memory] 手动回收ImageVIew的图片资源

    ImageView默认是不进行图片资源的回收的,需要我们自己在activity或者fragment中进行回收: public static void releaseImageViewResouce(I ...

  3. [转]在Excel中使用SQL语句实现精确查询

    本文转自:http://blog.sina.com.cn/s/blog_5fc375650102e1g5.html 今天在微博上看到@数据分析精选 分享的一篇文章,是关于<在Excel中使用SQ ...

  4. python Parent.__init()和super(Child, self)的区别

    super函数做的事情 def supper(cls, inst): mro = inst.__class__.mro() return mro[mro.index(cls) + 1] inst生成父 ...

  5. scrapy-splash抓取动态数据例子一

    目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...

  6. TestNG 二、测试组

    一.测试组 TestNG 允许你将测试方法归类为不同的组.不仅仅是可以声明某个方法属于某个组,而且还可以让组包含其他的组.这样TestNG可以调用或者请求包含一组特定的组 (或者正则表达式)而排除其他 ...

  7. javascript闭包传参就这么简单

    var query = (function (a) { return a; })('fx'); alert(query);

  8. 算法笔记_114:等额本金(Java)

    1 等额本金 标题:等额本金 小明从银行贷款3万元.约定分24个月,以等额本金方式还款. 这种还款方式就是把贷款额度等分到24个月.每个月除了要还固定的本金外,还要还贷款余额在一个月 中产生的利息. ...

  9. 第【一】部分Netzob项目工具的安装配置

    第[一]部分Netzob项目工具的安装配置 声明: 1)本报告由博客园bitpeach撰写,版权所有,免费转载,请注明出处,并请勿作商业用途. 2)若本文档内有侵权文字或图片等内容,请联系作者bitp ...

  10. 使用caffe的HDF5数据完毕回归任务

    一直在研究怎样用caffe做行人检測问题.然而參考那些经典结构比方faster-rcnn等,都是自己定义的caffe层来完毕的检測任务. 这些都要求对caffe框架有一定程度的了解.近期看到了怎样用c ...