服务器状态管理,状态管理

今天来简单的谈一下什么是状态管理。

首先看一下这两个图

1. 服务端渲染的WEB开发

396d9584e7f0

服务端渲染的WEB开发

2.前后端分离的单页应用(SPA: Single Page Application)

396d9584e7f0

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

396d9584e7f0

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

组件直接的数据共享

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

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

最后让我来总结一下,到底什么是状态管理?

状态管理就是,将客户端和服务器的多次交互当作一个整体,将多次交互所涉及的数据状态保存下来。

解决方式:

1. 保存在cookie中

2. 保存在session中

3. 保存在本地存储当中

4. 其它方式,使用第三方状态管理框架,如: Vuex

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值