状态管理可以分成多个层面来讨论。

UI 状态

UI 状态通常被用来控制页面的交互，比如打开弹框、通知消息、修改颜色等。出于性能和可维护性考虑，我们建议让状态与使用状态的组件离的越近越好。不要把所有状态都放到全局状态上去。

下面是一些比较好的 UI 状态库：

• Contextopen in new window + hooksopen in new window
• zustandopen in new window
• constateopen in new window
• reduxopen in new window
• mobxopen in new window
• jotaiopen in new window
• recoilopen in new window

这里有一个 UI 状态管理的样例open in new window

服务器缓存状态

这种类型的状态，通常都需要从服务端获取数据，然后缓存在客户端，方便后续时候。

虽然我们可以通过一些状态管理库比如 redux 来实现数据缓存，但是社区里有更好的解决方案。

这里有几个比较好的服务器缓存状态库：

• react-queryopen in new window 支持 REST 和 GraphQL
• swropen in new window 支持 REST 和 GraphQL
• Apollo Clientopen in new window 仅支持 GraphQL
• urqlopen in new window 仅支持 GraphQL

这里有一个服务器缓存状态的样例open in new window

URL 状态

在有些场景下，我们会将一些数据状态放到浏览器的地址栏中，来保存页面状态。比如在一个分页列表，我们可以在页面刷新的时候保证当前选中的页码不变。

关注微信公众号，获取最新推送~

加微信，深入交流~