React状态管理库现状

状态管理的产生

• 为什么需要状态管理

  状态管理伴随着现代前端框架的崛起而诞生，在经典的单页应用中，组件内部状态随着组件的挂载而产生，销毁而销毁，全局状态则随着应用挂载而一直存在，这时候，全局状态的共享，传递，变更就被抽离出来成了一个通用的解决方案。

  Vue与React都有较为简单的全局状态管理策略（Store模式，Context），但是当应用足够复杂，全局状态较多的时候，还是需要第三方的状态管理库进行统一管理。

• React体系的状态管理

  相比于Vue的官方推荐，React由于官方并没有明确推荐库，实际情况就会更错综复杂一些。在早期阶段，Redux基本占据了最主流位置，但是由于其过于繁琐的模版代码，让前期开发与后期维护都变得麻烦至极，Mobx脱颖而出，被很多开发者认可而使用。直到React 16.8版本引入了Hooks，Redux受到越来越多的批评，状态管理库也随着发生了一些变化。Redux加入了Redux Toolkit，Recoil的出现，pmndrs三大状态管理Zustand、Jotai、Valtio的崛起，还有小众的Rematch, Hookstate, Akita，React状态管理库更加的百花齐放。

下一代状态管理库

• Redux与Mobx的问题

  Redux因其繁琐冗长的语法与特性，让开发者往往要写大量的模版代码，加上异步处理需要用到复杂度更高的Redux中间件，让开发者不胜其烦。话虽如此，在最新的npm trends中，Redux的下载量还是居高不下，因为经过多年的考验，社区的生态与解决方案也是最为完备的，如果现在需要使用Redux，那么注意一定要使用其官方推荐的Redux Toolkit，写法简化了很多。

  Mobx是一个响应式编程库，相比于Redux少了很多模版代码，不过由于其理念与React不太相符，被称为没有template的Vue，有很多类似于Vue的新增概念，比如observable, computed, reaction, autorun...对于新人来说多了更多的心智负担，再加上其对代码的结构与实现没有限制，会让团队中状态管理的代码比较凌乱，Mobx也始终没能取代Redux。

• Zustand、Jotai、Valtio

  这次我们重点需要介绍的，是pmndrs所属的三个状态管理库，pmndrs是一个开源开发者集体，开源了很多有新意或者细分领域的工具，这三个状态管理库的主要开发者都是Daishi Kato。由于React状态管理库的长期混沌状态，没有一个库能接替Redux的大旗一统全局，三个状态库都是为不同的细分领域而存在。

  Zustand，为替代Redux而生，也是现阶段推荐大家使用的状态管理库，它的npm下载量已经和老牌选手Mobx不相上下了，并且增长趋势十分可观。

  

  其最主要的特点就是api极其简洁，打包后的大小仅为1kb，但是功能上却能完美替代Redux，被越来越多的开发者推荐。

  既然有个这么优秀的Redux替代品，为什么pmndrs还要推出另外两个库呢？这里就不得不先说Recoil，这是Facebook内部创建的库，在20年5月被Dave McCabe在演讲中公布了出来，后来被开源。这个库带来了一个新的理念，原子状态。Redux维护的全局状态一般是对象形式，里面包含了多个状态，被封装成一个整体的store。Recoil则是将状态分割为一个一个的最小单元，这与Hooks的理念是一致的。因为Recoil有着Facebook官方背景，加上新的状态管理理念彻底抛弃了Redux的固有的思路，与Hooks深度契合，所以一经面世就有很大的关注度。但是因为Recoil的api设计的有些怪异和繁琐，也一直没有很大的发展态势。而Jotai这个库，就是从Recoil理念借鉴而来的，但是提供了一套更简洁明了的api，为得是能让原子状态这个理念更好的发展下去。

  Valtio则是与Mobx类似的库，实现原理也是与Vue类似，使用Proxy拦截对象的读写操作，可以通过直接改变对象属性的值，来实现响应式渲染更新。相比于Mobx，Valtio有着更简单直接的api，更低的上手难度，大有取而代之之意。

  总的来说，如果你因为项目原因需要使用Redux，那么使用Redux Toolkit。否则的话，我更推荐大家使用更简洁轻量的下一代状态管理库，使用Zustand替代Redux，Jotai替代Recoil，Valtio替代Mobx。