背景

我相信很多朋友跟我一样,初次听到什么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. cpu个数、核数、线程数、Java多线程关系的理解

    cpu个数.核数.线程数.Java多线程关系的理解 2017年12月08日 15:35:37 一 cpu个数.核数.线程数的关系 cpu个数:是指物理上,也及硬件上的核心数: 核数:是逻辑上的,简单理 ...

  2. 四.rocketMQ原理

    ⦁    mqnamesrv服务 broker启动的时候(单个.多个),都会去查找namesrv注册. Producer发生消息的时候会根据topic获取路由到broker的信息. Consumer根 ...

  3. iOS:quartz2D绘图小项目(涂鸦画板)

    介绍:学了quartz2D的绘图知识后,我根据它的一些功能制作了一个小项目:涂鸦画板. 功能:绘制各种图形,还可以选取相册上的照片做涂鸦,然后保存到相册中.其中,还包括功能有:颜色的选取.线宽的选取. ...

  4. 流畅的python第四章文本和字节序列学习记录

    字符问题 把码位转化成字节序列的过程是编码,把字节序列转化成码位的过程是解码 把unicode字符串当成人类可读的文本,码位当成机器可读的, 将字节序列编程人类可读是解码,把字符串编码成字节序列是编码 ...

  5. TensorFlow------读取二进制文件实例

    TensorFlow------读取二进制文件实例: class CifarRead(object): ''' 完成读取二进制文件,写进tfrecords,读取tfrecords :param obj ...

  6. Spark Streaming ReceiverTracker架构设计

    本节的主要内容: 一.ReceiverTracker的架构设计 二.消息循环系统 三.ReceiverTracker具体实现 Spark Streaming作为Spark Core基础 架构之上的一个 ...

  7. [转]JQuery - Sizzle选择器引擎原理分析

    原文: https://segmentfault.com/a/1190000003933990 ---------------------------------------------------- ...

  8. How to make an executable jar file?

    https://stackoverflow.com/questions/5258159/how-to-make-an-executable-jar-file 文件的路径如下: package com. ...

  9. mac 下 homebrew安装

    打开 brew.sh  网址,然后按照说明操作.

  10. [Algorithm] Find Nth smallest value from Array

    Q1: Find the smallest value from array: function findMin(arr) { let min = arr[0]; for (let i = 1; i ...