React18 中如何实现全局状态管理

大家好，我是张大鹏，今天又来给大家分享技术文章了。

在之前的文章中，我给大家介绍了一个权限管理系统，已经实现了基本的登录功能，今天来讲一下如何实现全局状态管理功能。

先说一下需求：在用户登录以后，我们需要记录用户的登录信息，比如他的用户名，角色等，然后需要在页面的顶部动态的添加一个菜单，菜单名就是用户名，菜单下拉的时候，有退出登录和用户中心等选项。

如图：

这个功能看起来是比较简单的，比如我们可以使用localStorage存储用户信息，然后在任意位置通过localStorage访问信息。

一开始，我也是这么做的。不过React的组件的生命周期是比较奇特的，同一段逻辑代码，可能会被渲染两次，而且，就算你取到了数据，最后渲染出来的时候，可能也不一定是真的数据，这是真实发生的事情。最主要的问题在于我对于React组件的生命周期还没有太过于深刻的理解，不知道如何利用React本身的特点去解决这个问题。

之后，我将目光聚焦到了Redux这个框架上，希望通过Redux的引入来解决这个问题。不过Redux的官方文档成功将我劝退了，首先是它的官方示例里面推荐使用useStore来对状态进行管理，但是在webstorm里面又显示要使用configStore来进行替代。我查阅了大量的资料，最终找到了实现方案，但是却发现官方文档里面给的又是一个叫useSlice的钩子，要查看详细源码的时候，发现源码里面还是使用旧的useStore的方案。

过程很曲折，总之，最后就是我对这个强大的状态管理框架望而却步，敬而远之。

最终，我发现了另外一个轻量级的框架：

https://recoiljs.org/docs/introduction/getting-started/

如图：

这个框架的使用案例超级简单：

详细的内容大家可以看它的官方文档，这里给大家看看我在权限管理系统中是如何使用的。

首先，我会引入根组件，用根组件包裹整个容器，使得全局上下文管理器能够生效：

然后，我声明了一个用户信息的状态：

接着，在登录的时候，我将获取到的用户信息，存入到这个状态中：

之后当跳转到首页以后，我获取到全局的用户状态：

并使用这个全局的用户状态动态的生成顶部菜单：

最终就得到如下效果了：

到此为止，我们一个后台管理系统最核心的功能就开发完成了。后面我会接着开发用户管理的相关功能，比如如何展示所有的用户数据，如何筛选管理员和普通用户，如何进行分页展示，如何修改用户的信息等等。

这些功能会非常丰富，我会抽时间慢慢完善，然后将其输出为文章分享给大家。

这套系统目前是可以出售的哈，价格是3000元，另外如何想要完整的学习本套系统的开发流程，自己实现一个完整的权限管理系统，可以报名跟我学习，学费是5000元，整体的架构是 Golang1.20 + React18 + MySQL8，内容非常的丰富。如果你经济压力不大，我更推荐你报名一对一私教，提供一对一的指导教学，学的会更扎实，更明白，有问题也能够得到一对一的辅导。

今天的文章就分享到这里了，谢谢大家~