React 状态管理碎碎念

提到状态管理,可能大多数人的第一反应就是 redux、dva、mobx,可是随着时间的推移,React 的能力不断增强,前端的工程化日益成熟,应用的形态渐渐复杂,如今,或许我们应该重新审视一下,什么是状态管理,又如何做好状态管理。

状态管理的本质是什么

社区中对 React 状态管理方案的讨论从未停息过,特别是自从 Hooks 诞生以来,各种“新颖”的状态管理方案层出不穷,为了能更理性的看待这个问题,我们不妨把那些具体的框架/库都抛在脑后,先来聊一聊,抽象层面上的“状态管理”到底意味着什么。

给一个抽象的东西下定义,是非常难的。例如我们在讨论“书是什么”时,有些人可能会认为书就是纸张构成的一本印刷册,可有的人认为手写的一本稿子也算是书,而又有的人会认为电子产品中的一部文字的集合也算是广义上的书。空谈概念的定义是没有什么意义的,很多概念的边界是模糊的,与其浪费时间去争出一个大家都认同的“边界”,不如先找出一个粗略的定义,毕竟我们只是想借助对定义的探讨,来反观现实。❞

在我个人的观念里,状态管理主要有两个方面的职能:

  1. 「数据的共享」
    在 React 应用中,在组件间优雅的共享一些数据并非易事,而各种状态管理工具都给出了自己对“数据共享”的标准方案
  2. 「逻辑的组织」
    状态不单单是数据项的堆砌,更重要的是把各项数据之间的逻辑、数据与其他系统模块之间的互动逻辑进行组织,例如 A 需要在用户点击按钮时发生变化,而 B 又需要在 A 变化时跟着变化(可能是同步的也可能是异步的)

不知道这是不是 redux 或 mobx 的初衷,但这确实是我一直以来对状态管理工具的“「痛点需求」”。
那么接下来,我们不妨在这两个方面分别讨论:

数据共享:局部还是全局?

既然要共享数据,那么最简单粗暴的方案就是直接做成「全局」性的(redux 也确实是这么做的),于是很多人的都渐渐形成了一种认知:React 应用中的状态有两种,一种是组件内部的(this.state / useState),另一种是全局的(redux)。但是,「内部状态」的反义词从来都不是「全局状态」,而是「共享状态」,全局只是共享的一种途径罢了,并不能成为其本身。

目前来看,在组件间进行状态的共享,有两种比较可靠的途径,其一就是刚刚提到的「全局状态共享」,而另一种,也是我个人更加倾向的,是「局部状态共享」。React 提供了非常简洁易用的 Context API,用于在一个组件树中共享数据,局部状态共享的思路大致就是来自于此,在一个组件树(而非整个应用)内进行数据共享。
可是这样做又能有什么好处呢?

  1. 「自治」
    一个组件树可以完成逻辑的封闭,减轻对全局的依赖和干扰,甚至还对组件的封装非常有益
  2. 「多例」
    局部共享的状态也可以像组件(树)一样拥有多例的能力,可以打破全局单例对很多逻辑场景的限制
  3. 「生命周期」
    局部状态跟随组件树创建和销毁,干净而且易于维护,最常见的场景是让共享状态的生命周期和页面的生命周期保持同步

当然,反对的声音也是存在的:

  1. 「不够规范」
    局部状态满天飞,容易让逻辑变乱,排查问题也会变得非常困难
  2. 「需要一定的认知成本」
    局部状态不如全局状态那么直观,虽然灵活但也增加了使用成本

其实大家不难发现,局部状态中“局部”是可大可小的,不论是小至包裹在一个组件外面(虽然不会有人真的这样写代码),还是包裹到整个应用外面,都可以称之为“局部”。因此准确的讲,全局状态只是局部状态的一个「子集」、一个「特例」。局部状态这种模式,只是把枷锁解掉了,并非和全局状态互斥。

逻辑组织:Hooks 究竟改变了什么?

我觉得状态管理中真正的痛点在于“和数据相粘连的逻辑”如何组织,而 Hooks 提供了一整套完备的管理逻辑的方案,从状态到副作用到性能优化到异步。

在以前,对于组件内部的状态,逻辑组织能力是非常薄弱的,因此很多人求助于把状态抽到外部(例如 redux),因为外部的状态管理器中可以更好的组织业务逻辑。甚至更极端的,会试图把整个应用状态都放在 redux 中,而 React 组件内不允许保留状态。

但是 Hooks 的诞生让组件内部状态的逻辑组织能力得到了大幅提升,我觉得是完全不输甚至更强于 flux 模式的。如果我们能够把组件内部状态和共享状态全部都用 Hooks 进行组织,那我们就再也不需要对一份数据该存放在哪里而感到纠结了,因为我们只需要关心一点:这份数据被谁需要了?是只有这个组件自己,还是多个组件之间?

Hooks 不是为了状态管理而生的,但却可以深刻地改变整个生态。就像智能手机不是为了购物而生的,但却可以颠覆人们的消费和生活方式。

我们真的需要状态管理么

状态管理之所以一直以来被人们特意强调,一定程度上恰恰是因为它的格格不入,需要被人们去单独学习和特别注意。如果大胆猜测一下的话,我会觉得在不久的将来,我们之前热衷于讨论的“状态管理”这个词,会更多的意味着“状态共享”,甚至于销声匿迹。一个 React 应用的状态构成也会从“组件内的状态 + 状态管理器中的状态”变成“组件内的状态+组件间共享的状态”。

「写在最后」作为一名经验绝对算不上丰富的前端,写这篇文章确实花费了我很大的勇气,文中难免有所偏颇和疏漏,还请读者朋友多多包涵,若是能给大家带来一点帮助,那真的是非常荣幸。

React 状态管理碎碎念

原文出处:微信公众号【卡晨 前端技术砖家】

原文链接:https://mp.weixin.qq.com/s/ZrAH34zMyr7CvTVKQn83HQ

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论