【前端状态管理】React 状态管理工具如何选 context/redux/mobx/zustand/jotai/recoil/valtio

什么是状态管理?

“状态”是描述应用程序当前行为的任何数据。这可能包括诸如“从服务器获取的对象列表”、“当前选择的项目”、“当前登录用户的名称”和“此模式是否打开？”等值。

众所周知，我们在研发一个复杂应用的过程中，一套好的状态管理方案是必不可少的，既能提升研发效率，又能降低研发维护成本，那么状态管理方案那么多，它们有什么不同，我们又该如何选择适合当前应用的方案呢？

本期将主要就 react 的常用状态管理方案进行对比分析，希望对各位看客有帮助。

React 状态管理方案

方案介绍

hooks context
react-redux
mobx
zustand
jotai
recoil
valtio

方案对比

框架	原理	优点	缺点
react hook + context	基于 react hook，开发者可实现内/外部存储	1. 使用简单 2. 不需要引用第三方库，体积最小 3. 支持存储全局状态，但在复杂应用中不推荐 4. 不依赖 react 上下文，可在组件外调用（注：外部存储的条件下）	1. context value发生变化时，所有用到这个context的组件都会被重新渲染，基于 context 维护的模块越多，影响范围越大。 2.依赖 Context Provider 包裹你的应用程序 3. 受ui框架约束(react)
react-redux	Flux思想，发布订阅模式，遵从函数式编程，外部存储	1. 不依赖 react 上下文，可在组件外调用 2. 支持存储全局状态 3. redux 本身是一种通用的状态解决方案	1. 心智模型需要一些时间来理解，特别是当你不熟悉函数式编程的时候 2. 依赖 Context Provider 包裹你的应用程序 3.受 ui 框架约束(react)
mobx	观察者模式 + 数据截止，外部存储	1. 使用简单，上手门槛低 2. 不依赖 react 上下文，可在组件外调用 3. 支持存储全局状态 4.通用的状态解决方案	1.可变状态模型，某些情况下可能影响调试 2. 除了体积相对较大之外，笔者目前未感觉到较为明显的缺点，3.99M
zustand	Flux思想，观察者模式，外部存储	1. 轻量，使用简单，上手门槛低 2. 不依赖 react 上下文，可在组件外调用 3. 支持存储全局状态 4. 通用的状态解决方案 5. 基于 zustand-pub 能实现状态模块化管理 (npm/umd等)，减少重复开发 5.有完善的跨框架(react/vue)实现状态管理与共享方案	1.框架本身不支持 computed 属性，但可基于 middleware 机制通过少量代码间接实现 computed ，或基于第三方库 zustand-computed 实现
jotai	基于 react hook，内部存储	1. 使用简单 2. 组件颗粒度较细的情况下，jotai性能更好 3.支持存储全局状态	1. 依赖 react 上下文，无法组件外调用，相对而言, zustand 在 react 环境外及全局可以更好地工作 2.受ui框架约束(react)
recoil	进阶版 jotai,基于 react hook + provider context，内部存储	相对于 jotai而言，会更重一些，但思想基本不变，拥有一些 jotai 未支持的特性及 api，如： 1.监听 store 变化 2. 针对 atom 的操作拥有更多的 api，编程上拥有更多的可能性，更加有趣	拥有 jotai 所有的缺点，且相对于 jotai 而言: 1.使用 recoil 需要 < RecoilRoot > 包裹应用程序 2. 编写 selector 会复杂一些
valtio	基于数据劫持，外部存储	1. 使用简单，类mobx（类vue）的编程体验 2.支持存储全局状态 3.不依赖 react 上下文，可在组件外调用 4. 通用的状态解决方案	1.可变状态模型，某些情况下可能影响调试 2.目前笔者没发现其它特别大的缺点，个人猜测之所以star相对zustand较少，是因为 valtio 的数据双向绑定思想与 react 存在冲突。

Source

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

// 状态及相关事件
class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

// 构建可观擦组件
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

ReactDOM.render(<TimerView timer={myTimer} />, document.body)

// 触发更新事件
setInterval(() => {
    myTimer.increase()
}, 1000)

zustand

import { create } from 'zustand'

// 状态及相关事件
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

// 渲染视图
function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

// 触发更新事件
function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

jotai

import { atom } from 'jotai'

const countAtom = atom(0)

function Counter() {
  // 状态及相关事件
  const [count, setCount] = useAtom(countAtom)
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
    </h1>
  )
}

recoil

const fontSizeState = atom({  
  key: 'fontSizeState',  
  default: 14,  
});
function FontButton() {  
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);  
  return (  
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>  
      Click to Enlarge  
    </button>  
  );  
}

valtio

import { proxy, useSnapshot } from 'valtio'

const state = proxy({ count: 0, text: 'hello' })

function Counter() {
  const snap = useSnapshot(state)
  return (
    <div>
      {snap.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  )