[译] 状态管理中的第一性原理

简介: [译] 状态管理中的第一性原理

原文链接: mp.weixin.qq.com

原文:michaelnthiessen.com

理解如何使用 Vuex 固然重要,但我想谈谈比那更深入的东西。

如你所见,在任何前端框架中,包括 React、Angular 和 Svelte -- 这只是其中很少几个的名字,关于状态如何运转都存在着很多基础性的概念。

理解这些概念有助于使用任何种类的状态管理工具,包括 Vuex。

但是这次我要只聚焦在一件事情上:一件普遍存在于这些框架中的事情;一件将帮助我们更好理解关于状态的争论的事情。

第一性原理(The First Principle)

译注:第一性原理又称“第一原理”。其实是古希腊哲学家亚里士多德提出的一个哲学术语:“每个系统中存在一个最基本的命题,它不能被违背或删除。”

在前端框架的状态管理方面,这就是:

在组件树中,数据只向下流动,从不向上流动。

在你的 Vue 应用中,一个组件中的数据只能被传递到子组件中,而不能反其道行之。

当然了,scoped slots 是个例外;但这不妨碍我在这里的观点。

这是个非常简单的原理,但我想要探索其蕴含的一些涵义。

涵义 #1

如果数据只向下流动,那么数据所生存之处应该高于其被应用之处 。

这包括了所有用到状态的地方。

所以,理解了这一点,你就会把所有数据都放到根组件中,那可是尽可能最“高”的地方了。

当然,你是不会那样做的,但是为什么不呢?

涵义 #2

把一切放进根组件解决了涵义 #1,但我们遇到了另一个问题:

我们不得不将所有东西都作为 props 在树上向下传递,过多的属性会让事情变得过于复杂和凌乱。

这也破坏了关注点分离原则。所有组件都将知道所有这些属性,即便组件根本用不到它们。

但你已经知道这是个坏注意了,原因呢?

数据应该接近使用它的组件,并且我们应该通过将数据保持在组件树向下流动的方向上尽可能远的地方来保持其接近性 。

不用担心,我们会进一步解释这些……

涵义 #3 (终极观点)

我们已经确定了数据只应该向下流动的原则。

以及从此学到的两件事情:

1. 数据应该被放置在组件树中的高处

2. 数据应该在组件树中尽可能低的位置

看起来我们在这里陷入了一个悖论……

但是这种事也发生在我阅读圣经的时候,我新学到的关于上帝的一些事情好像和之前我学过的相矛盾。

其实,只需要再更深入一些、想得更多一些。

在思考了一会这个问题后我得出了这样的结论:

数据应该被放置在向下流动的组件树中尽量远,同时也是离需要其的组件足够高的地方,以便能够向组件提供数据。

如果能平衡好这两点相反的约束,就能找到状态应该在的那个点。

如果状态只用于一个组件,将其留在组件内即可。

如果状态用于多个组件,将其放到父组件中或抽离出来。

相关文章
|
5月前
|
调度 数据库 uml
高级系统架构设计师问题之线程状态变化如何解决
高级系统架构设计师问题之线程状态变化如何解决
|
4月前
|
消息中间件 JavaScript 前端开发
【转载】CDC——前端状态管理设计——优雅与妥协的艺术
【转载】CDC——前端状态管理设计——优雅与妥协的艺术
40 0
|
7月前
|
调度
【核心完整复现】基于目标级联法的微网群多主体分布式优化调度
【核心完整复现】基于目标级联法的微网群多主体分布式优化调度
|
7月前
逻辑模型—第一性原理
逻辑模型—第一性原理
|
存储 开发框架 缓存
数据流动的精妙之道——UniApp中的数据通信与状态管理解析
数据流动的精妙之道——UniApp中的数据通信与状态管理解析
|
存储 Kubernetes 负载均衡
【k8s 系列】k8s 学习二十六,有状态的应用如何部署 1?
前面我们分享很多关于 K8S 的内容,有没有发现 pod 都是无状态,RS / RC 管理的 pod 也是无状态的,我们可以任意删除一个 pod,副本管理器又会马上给我们创建一个 pod 那么如果咱们的这个 pod 是有挂载持久卷的,那么我们用老方法可还行?
196 0
|
JavaScript 前端开发 中间件
谈谈复杂应用的状态管理(上):为什么是 Zustand
谈谈复杂应用的状态管理(上):为什么是 Zustand
1135 0
|
缓存 前端开发 JavaScript
谈谈复杂应用的状态管理(下):基于 Zustand 的渐进式状态管理实践
谈谈复杂应用的状态管理(下):基于 Zustand 的渐进式状态管理实践
407 0
|
消息中间件 运维 监控
实操讲解:微服务运行状态监测(一)|学习笔记
快速学习实操讲解:微服务运行状态监测(一)
588 0
实操讲解:微服务运行状态监测(一)|学习笔记
|
JSON 运维 安全
实操讲解:微服务运行状态监测(二)|学习笔记
快速学习实操讲解:微服务运行状态监测(二)
301 0
实操讲解:微服务运行状态监测(二)|学习笔记