全都要！一文带你全面体验八种状态管理库

写在前面

状况办理库伴跟着数据驱动类结构诞生以来，一直都是个带争议的话题，社区里关于这个方向的讨论文章也是不计其数，本文写作的意图并不是去具体回答每一款状况库的规划原理和最佳实践，而是期望能从大局视角动身，更全面的了解当下主流状况库的运用体会，一起引导读者告别选择困难症，避免堕入主观臆断，在有充沛常识储备的布景下，去提高状况库在实践项目中的选用标准，正所谓：小孩子才做选择题，成年人当然是全都要，项目里能够不必，可是技术上不能不懂！

拓荒劈道

一直以来，跟着前端项意图日趋杂乱，怎么更高雅的处理页面中数据展现和状况改动就成了各个结构要处理的中心问题，以2015年为分水岭，前期的前端结构大都以操作DOM为中心，调配各种指令来简化页面中的数据处理，首要思维以指令式编程为主；2015年今后，React结构开端步入成熟并引进了class组件 + setState的写法，带来现代前端结构的一次大革命，其处理问题的中心思路是：把之前环绕DOM操作的过程式指令变为针对状况的声明式描述，即：UI=f(State) ， 一起也带火了数据驱动规划、函数式编程以及ES6，Babel，Webpack、ESM等一系列优异的开发东西链，从那时起，前端开发全家桶的思维开端深入人心，脱口即出的用语从“用户体会提高”变成了“前端工程化落地”。

混沌时代

伴跟着工程化思维的推进落地，前端开发的杂乱度也日趋添加，为了更好的应对大规划出产的实践需求，各大结构都会引进组件化（ component）的概念，化整为零，简化代码保护本钱，一起考虑到数据的改动和流动性，又提出了单向数据流（unidirectional data flow）的思维，即数据是经过Props特点由上向下（由父及子）的进行传递的，只能从一个方历来修正状况。当页面嵌套结构简略时，经过层层传递的通讯办法能勉强接受，可是遇到事务组件过深的时候，就会感受到被阴间式层级分配的恐惧，所以，React 开端引进了 Context，一个用于处理组件 “跨级” 通讯的官方计划，同享那些被认为对于一个组件树而言是“大局”的数据，这也是大局状况办理东西的最早原型。

原力觉悟

回归根源，所谓的各种状况办理东西要处理的最中心问题即：高雅地完结跨层级组件间的数据通讯和状况同享，与之相照应也会产生一些额外的副产品，例如：明晰地办理状况改动，高雅地拆分代码逻辑，统筹同步和异步逻辑处理等，化繁为简便是如下三个处理阶段：Actions <=> State <=> View。

考虑到中心库本身的简略高效，状况库的处理计划会相似Router库一样，下放到社区生态中去保护，这样就带来两个局势：

1. 非官方，React社区呈现了百舸争流的局势（隔壁家Vue做了收敛，由官方团队一致供给）

2. 非强制，状况库运用权下放给开发者，用它有一万种理由，不必两种理由：工程不杂乱 / 有hooks

此外，由于完结思维的不同，状况库的规划又引出了多种门户，可是要处理的问题也绕不开如下环节，所以把握了处理数据流改动的规划模式，上手任何一款状况库都是能很快找到诀窍的。

根本概念：

• URL – 拜访页面时，路由上数据的即时获取和存储（多为param，query等）

• API Server – 从本地端主张恳求拿到服务端数据（可考虑远端数据是否需求都进入一致数据源）

• Data – 本地数据源，一般在状况库中称为Store，寄存需求通讯用的全部状况数据

• View – 呈现数据改动终究态的页面，对应到JSX或许Template，需秉承最小更新准则

• Action – 当需求改动数据时，不允许直接改动，应当操作Action来完结，需统筹同步/异步

通用规划：

一、结构（Structure） ：一般有三种构造办法来安排状况数据的寄存。

1. global： 大局式，也被称作单一数据源，将全部的数据放到一个大目标中，关键词：combineReducers();

2. multiple stores： 多数据源模式，将状况寄存到多个数据源中，可在多个当地运用消费，关键词：useStore()；

3. atomic state： 原子状况，与创立目标形式的存储不同，针对每一个变量能够是呼应式的，经过原子派生的办法来适应杂乱的开发场景，关键词：atom()；

二、读取操作（get/read） ：约定怎么从Store中读取需求运用的数据，能够是直接读取源数据(getter)，也能够是读取派生数据(selector)。

1. getter： 运用时直接是xxx.name，一般可调配getter办法做些额外修饰，完结相似computed的作用，多用在object或许class中；

2. selector function：派生数据，一般运用办法如下： useSelector(state => state.counter)；由于每次派生出来的结果是一个带逻辑的函数，能够调配useMemo，shallow等计划做些功能优化；

三、更新数据（set/write） ：此部分的操作会决议你怎么去更新数据状况并终究反应到视图中，一起也会影响你怎么封装操作逻辑，此外还需求感知是同步操作仍是异步操作，一般有三种办法：

1. setter： 此类操作办法会尽量靠近React.useState里的用法，const [counter, setCounter]=useState(0)，支撑setCounter(newValue)和setCounter(prev=>prev+1)两种操作了

2. dispatch： 旨在将操作动作和实践数据相分离，dispatch的触发函数中不需求包含实践处理逻辑，只需求触发类型(type)和更新值(payload)；例如：dispatch({type:'decrement', value: 'newVal'})

3. reactive： 呼应式更新，此类操作最简略直接，只需求保证更新动作被包装在action函数下，更新操作为：action(counterStore.decrement())即可完结更新动作。

4. 不行变数据： 考虑到数据操作的副作用，一般鼓舞运用不行变数据结构来完结数据更新，通常简略的办法能够用Object.assign()，{…}打开符，杂乱的结构可用immutable.js，immer等来配套运用，实践项目开发中应避免数据结构嵌套过深。

小结一下：前期的状况库像极了你遇到过的渣男，擅长洗剪吹，各种花活套路样样彻底，让你获益让你纠结，但一时之间还无法扔掉！！！

百家争鸣

跟着2018年React V16.8的问世，Function Component一夜之间翻身做主人，一起Hooks的概念一经推出即得到了人民群众的一致好评，一大波环绕Hooks开展的整风运动随之鼓起，追求小而美，上手快的开发理念，也直接影响到了状况办理库的规划，并诞生了一系列新式著作。

社区下载数据状况：2021排行榜，实时数据直达

归纳下来，一款优异的状况办理库应当尽量满意如下条件，也可依据事务实践状况做些功能偏重：

• TypeScript类型支撑

• 友爱的异步操作

• 支撑高雅分割（中心化 → 去中心化，数据调集 → 元数据）

• 少重复样板代码

• 高内聚，低耦合，组件自治优先

• 支撑状况间互相依靠

• 自带优化，精准更新

• 丰富的生态系统（middleware，plugin等）

• 契合函数式特性（immutable，computed，memoization…）

• 一起支撑 Class 与 Hooks 组件（新旧过渡）

• API明晰简练，上手简略

归纳评测

本文中咱们将环绕如下八种状况库的运用进行评测，作用场景均一样，即完结一个简略的数字计算器（同步）和长途数据拉取（异步），重在开发体会以及上手本钱，也会比照烘托功能优化的作用。

称号	地址	上手难度	一句话概括
React Context	reactjs.org/docs/contex…	简略	官方API，能用但不完美
mobx	mobx.js.org/README.html	中等	将呼应式贯彻到底，黑魔法合集
redux	redux-toolkit.js.org	杂乱	学术经典，老而弥坚
zustand	github.com/pmndrs/zust…	简略	后起之秀，大道至简，引荐学习源码
jotai	jotai.org/	简略	和zustand一个安排，属于简配版recoil
recoil	recoiljs.org/	中等	原子式思维，FB旗下工作室出品，但非官方
pinia	pinia.vuejs.org/	简略	Vue的下一代官方状况办理库，Vuex的替代品
xstate	xstate.js.org/docs/	杂乱	微软出品，依据状况机理念规划的状况库

友情提示： 上述状况库在社区中都有着不错的口碑和下载量，并在实战中得到了充沛验证。无论是哪种库的选用权均在读者本身，可是笔者仍是期望能够多些赞赏，少些吐槽，究竟存在即合理，他们代表着社区中优异开发者的最佳水平，假如都不喜爱，也欢迎加码过来：Show Your Code！！！

React Context

context是官方认证的用于处理状况同享的API，简略直接，开箱即用，假如你的工程规划不大，能够依据此API调配useReducer，useState等快速封装一个轻量级的状况办理东西。

中心过程：

1. 依据createContext()创立一个大局可拜访的context：const Context = React.createContext()；

2. 在事务组件的外层上创立provider：<Context.provider value={initialValue}>{children}</Context.provier>

3. 在需求消费数据的组件中，经过useContext办法获取value，必须在propvider的children组件中才能被调用：const value = React.useContext(Context)；

代码完结

中心源码：

import React from "react";
// @byted/hooks: createModel 
// from: https://github.com/jamiebuilds/unstated-next
const EMPTY: unique symbol = Symbol();
export interface ContainerProviderProps<State = void> {
  initialState?: State
  children: React.ReactNode
}
export interface Container<Value, State = void> {
  Provider: React.ComponentType<ContainerProviderProps<State>>
  useContainer: () => Value
};
export function createContainer<Value, State = void>(
  useHook: (initialState?: State) => Value,
): Container<Value, State> {
  let Context = React.createContext<Value | typeof EMPTY>(EMPTY)
  function Provider(props: ContainerProviderProps<State>) {
    let value = useHook(props.initialState)
    return <Context.Provider value={value}>{props.children}</Context.Provider>
  }
  function useContainer(): Value {
    let value = React.useContext(Context)
    if (value === EMPTY) {
      throw new Error("Component must be wrapped with <Container.Provider>")
    }
    return value
  }
  return { Provider, useContainer }
}
export function useContainer<Value, State = void>(
  container: Container<Value, State>,
): Value {
  return container.useContainer()
}

hooks:

// hooks
export const useCount = () => {
  const [count, setCount] = useState(0)
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<User[]>([]);
  const add = useFunction((x: number) => {
    setCount(count => count + x)
  });
  const minus = useFunction((x: number) =>{
    setCount(count => count - x)
  });
  const reset = useFunction((x: number) => {
    setCount(0);
    setList([]);
  });
  const fetchList = useFunction(async (id: number) =>{
    setLoading(true)
    await sleep(1000);
    try {
      const { data } = await getUserInfo<User[]>({id});
      setList(data);
      setLoading(false);
      return data;
    } catch (e){
      setLoading(false);
    }
  })
  return {
    count,
    add,
    minus,
    reset,
    fetchList,
    loading,
    list
  }
}
export const CounterModel = createContainer(useCount);

provider:

// provder
import React from 'react'
import ReactDOM from 'react-dom/client'
import { CounterModel } from './store';
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <CounterModel.Provider>
      <App />
    </CounterModel.Provider>
  </React.StrictMode>
)

useContext:

// use value
import React from "react";
import Count from './Count';
import { CounterModel } from '../models';
import './style.css';
function App() {
  const {
    add,
    minus,
    reset,
    fetchList,
    list,
    loading
    // count
  } = CounterModel.useContainer();
  .....
}
// rerender
list~loading [] true
Count.tsx:8 count -1
index.tsx:32 list~loading (2)[{…}, {…}] false
Count.tsx:8 count -1

点评反思

1. 依据context的计划最大的隐患是引进了页面从头烘托的问题， 不同于依据selector完结的细粒度呼应式更新，context的值一旦改动，全部调用了useContext()的组件均会从头触发烘托更新。由于context API并不能细粒度地分析某个组件依靠了context里的哪个特点，而且它能够穿透React.memo和dependence的比照，所以针对频频引起数据改动的场景，在运用时需分外谨慎。

2. Provider层层嵌套，调试体会极差；一起也不利于杂乱Store结构的安排，事务量大了今后各种数据和操作混在一块，不做工作空间隔离(分拆成多个context)简略形成互相覆盖；不同Provider之间的数据联动处理也较为繁琐。

小结一下：

context适合作为一次性同享消费的处理场景，数据结构应到越简略越好，例如：国际化，主题，注册等这类大局改动且需求强制更新的操作。context的数据办理计划应当作为运用程序数据的一部分而非大局状况办理的通用处理计划。

Redux

“redux的store装备书写太臃肿杂乱，又是configureStore又是combineReducers，上手费事！”

“各种开发辅佐包，各种middleware，装备一个redux的工程比写事务逻辑还杂乱！”

“各种样板代码，各种环绕的代码逻辑，又臭又长，望而却步”

“ Dan Abramov 都跑路去facebook，作者自己都不玩了，没前途了！！！”

虽然下载数据持续走高，可是业界对于Redux的评价一直都不高，戋戋几百行的代码融入了太多高深的函数编程技巧，活脱脱的一部新手劝退指南。显着Redux官方也认识到了这个问题，在后Dan时代，新的团队开端着手于处理上述问题，本着相似create-react-app一样的精神，尽可能多地供给通用东西，笼统设置过程，打包常见场景东西集，供给最佳实践用例，降低用户的上手门槛，使其更好的运用Redux，新的这些都体现在： Redux Toolkit。

API 概览：

中心过程

1. 依据事务模块分拆features，将state，reudcer等一致经过createSlice做好集成并导出；

2. 将各个slice模块中的reducer经过combineReducers进行会集整合，形成rootReducer；

3. 将rootReducer和各个需求用到的middleware经过configureStore会集整合，形成store；

4. 在React的App组件中包裹react-redux的Provider，并注入store，<Provider value={store}>{children}</Provier>

5. 在需求用到的组件中经过useSelector和useDispatch的回来函数完结终究取值调用。

代码完结：

createslice：

import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit";
const initialState: Counter = {
  bears: 0,
  loading: false,
  list: []
};
export const fetchListAsync = createAsyncThunk(
  "fetch/list",
  async (userId: number, { rejectWithValue }) => {
    await sleep(1000);
    try {
      const response = await getUserInfo<User[]>({id: userId})
      return response.data
    } catch (err) {
      const error = err as AxiosError<ValidationErrors>
      if (!error.response) {
        throw err
      }
      return rejectWithValue(error.response.data)
    }
  }
);
export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.bears += 1;
    },
    resetValue: state => {
      state.bears = 0;
      state.list = [];
    },
    decrement: state => {
      state.bears -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.bears += action.payload;
    },
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.loading = action.payload;
    }
  },
  extraReducers: (builder) => {
    builder.addCase(fetchListAsync.pending, (state) => {
      state.loading = true;
    })
    .addCase(fetchListAsync.fulfilled, (state, { payload }) => {
      state.loading = false;
      state.list = payload;
    })
    .addCase(fetchListAsync.rejected, (state, action) => {
      state.loading = false;
    })
  }
})
export const {
  increment,
  decrement,
  incrementByAmount,
  resetValue,
} = counterSlice.actions;

combineReducers：

import { combineReducers } from '@reduxjs/toolkit'
import counterSlice from '../features/counterSlice'
import apiSlice from '../features/apiSlice'
const rootReducer = combineReducers({
  counter: counterSlice.reducer,
  [apiSlice.reducerPath]: apiSlice.reducer,
});
export default rootReducer;

configureStore:

import { configureStore, Action, ThunkAction } from '@reduxjs/toolkit';
import logger from 'redux-logger'
import rootReducer from "./rootReducer";
import apiSlice from '../features/apiSlice';
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware().concat([logger, apiSlice.middleware]);
  },
})
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk = ThunkAction<void, RootState, unknown, Action<string>>
export default store

provider:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from "react-redux";
import store from './store';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

useAppDispatch + useAppSelector:

import React from "react";
import { useAppDispatch, useAppSelector } from "../store/hooks";
import {
  increment,
  decrement,
  resetValue,
  incrementByAmount,
  fetchListAsync,
} from "../features/counterSlice";
import Count from './Count';
import './style.css'
function App() {
  const dispatch = useAppDispatch();
  const loading = useAppSelector(state => state.counter.loading);
  const list = useAppSelector(state => state.counter.list);
  .....
}

点评反思：

1. 依据@reduxjs/toolkit套件供给的API写出的代码，相对于曾经的redux风格已经有了显着提高，代码逻辑也变得愈加内聚，一起redux多年积累的生态能够完好运用，这点仍是非常强壮的；

2. 运用者要显着感知同步和异步操作，需结合createSlice.extraReducers + createAsyncThunk协作完结对应功能，运用起来有一定的心智负担；

3. 代码安排形式略重，虽然已经简化了许多细节概念可是全体的数据流操作思维没有改动，运用者仍是需求系统学习redux才能完好上手做项目。

小结一下：

“You may not need to use redux，but you can’t replace it by hooks !”

Mobx

mobx是在与Redux的分庭反抗中为数不多的发展杰出的一款状况办理库，作者是业界有名的“轮子哥”-Michel Weststrate，他和Dan一样，现在也是React团队的成员之一（What Can I Say？）。相较于redux里鼓舞的immutable，mobx则坚持走Reaction，经过透明的函数呼应式编程使得状况办理变得简略和可扩展。MobX背后的哲学很简略：任何源自运用状况的东西都应该主动地取得 ， 其中包含UI、数据序列化、与服务器通讯等，上手运用简略。

API 概览：

MobX 供给了运用状况优化与 React 组件同步机制，这种机制便是运用呼应式虚拟依靠状况，它只要在真正需求的时候才更新而且永久坚持最新状况。

中心过程

1. 依据事务模块分拆成多store，将需求做呼应式更新的字段和办法经过makeObservable封装到一个class(object)中并导出，示例参阅

2. 将各个store进行会集整合，形成一个RootStore；

3. 依据createContext()创立context，并将rootStore注入到context.provider的value中，<RootStoreContext.Provider value={stores}>{children}</RootStoreContext.Provider>;

4. 将RootStoreContext.Provider包裹到在React的App组件外层；

5. 在需求用到的组件中调配observer和useStores完结终究调用。

代码完结

store:

import { makeAutoObservable, runInAction } from "mobx";
class CounterStore {
  constructor() {
    makeAutoObservable(this, {},{ autoBind: true });
  }
  // properties becomes observables
  name = 'counter';
  bears = 0;
  list = [];
  loading = false;
  // `getter` becomes computed (derive) property,
  get result() {
    return `Result: ${this.bears}`
  };
  // `setter` becomes mobx actions
  // which is the updater of the stor
  set increase(num: number) {
    this.bears += num;
  };
  set reduce(num: number) {
    this.bears -= num;
  };
  setLoading(loading: boolean){
    this.loading = loading;
  };
  reset() {
    this.bears = 0;
    this.loading = false;
    this.list = [];
  };
  // async updating is happens within a normal async function
  async updateUserList() {
    await sleep(1000)
    this.loading = true;
    const { data } = await getUserInfo<User[]>();
    // if you want to update the store, wrap it with the runInAction()
    try {
      runInAction(() => {
        if (data.length > 0 ){
          // @ts-ignore
          this.list = data;
        }
      });
    } catch (e){
      console.error(e);
    }
  };
  // if you dislike runInAction(), just write a generator function
  // underneath, it will be wrapped with a flow() from 'mobx';
  // just remember do this when calling from the user land,
  // `const res = await flowResult(store.updateFromRemoteFlowVersion())`
  *updateDataList() {
    this.loading = true;
    yield sleep(1000)
    try {
      const { data } = yield getUserInfo<User[]>();
      this.list = data;
      this.loading = false;
    } catch (e){
      this.loading = false;
      console.error(e);
    }
  };
}
export default CounterStore;

rootStore:

import React, {createContext, FC, PropsWithChildren} from "react";
import CounterStore from "./counter";
interface StoreProps {
  counterStore: CounterStore
}
interface Props {
  children: PropsWithChildren<React.ReactNode>;
}
export const RootStoreContext = createContext<StoreProps>(null!);
const stores = {
  counterStore: new CounterStore()
};
const RootStore: FC<Props> = ({ children }: Props) => {
  return <RootStoreContext.Provider value={stores}>{children}</RootStoreContext.Provider>;
};
export default RootStore;

provider:

import React from 'react';
import ReactDOM from 'react-dom/client';
import RootStore from './store';
import App from './App';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RootStore>
      <App />
    </RootStore>
  </React.StrictMode>
);

observer + useStores：

import React from "react";
import { observer } from "mobx-react-lite";
import useStores from '../hooks/useStores';
import Count from './Count';
import './style.css';
function App() {
  const { counterStore } = useStores();
  const { list, loading, updateDataList, reset } = counterStore;
  console.log("list~loading", list, loading);
  ......
}
export default observer(App);

点评反思：

1. mobx中的呼应式更新的理念算是比较创新的一种实践，用过Vue的同学应该不会陌生，调配observer()内部会主动处理memo；

2. 全体要学习的概念少，了解4个根本api即可满意大部分需求场景，不必显着感知同步异步操作；

3. 选用多store进行数据办理，store之间的数据联动处理费事，需求坚持对rootStore的引用；

4. 由于选用了许多首创的规划，实践项目中会有些小坑

小结一下：

全体上算是一个非常优异的状况办理库，一起社区的更新适配及时，与react的特性演进同步，不会影响太多事务代码风格，在团队顶用很多实践落地。

Zustand

这是一股来自东方的奥秘力量，保护团队叫：dashi，做了非常多有代表性的react周边东西，除了zustand外，另一个jotai也是出自他们的手笔，代码规划遵从大道至简的理念，一起也吸收了许多社区里的一些计划的精华，其状况办理是能够脱离于React组件本身的状况，作为一个可控的第三方存储来运用，既支撑将状况保存在一个目标里进行办理，也能创立多store来分离保护杂乱状况。

API 概览：

zustand 是一个完结非常精巧的状况办理库，分层合理高雅，中间件完结奇妙，大部分运用特性都在利用 React 语法，代码逻辑明晰简略，除了在出产环境中落地外，也有很强的学习参阅价值。

中心过程

1. 既支撑单store加类reducer的办理办法，也可依据事务模块分拆成多store，灵敏可控；

2. 运用create((set, get)=> ({....})) 办法创立store中的数据结构，默认immutable；

3. 像写hooks一样写action逻辑，不必感知同步仍是异步操作；

4. 不需求供给context provider，不侵入事务规划；

5. 在子组件中运用useStore()办法完结调用，自带selector和shallow比较，优化重复烘托；

代码完结

store:

import create from 'zustand'
import { User, Counter} from './type';
import {getUserInfo, sleep} from "@smt/utils";
export const useStore = create<Counter>((set, get) => ({
  bears: 0,
  list: [],
  loading: false,
  increase: () => set(state => ({ bears: state.bears + 1 })),
  reduce: () => set(state => ({ bears: state.bears - 1 })),
  reset: () => set({ bears: 0, list: [] }),
  setLoading: (val: boolean) => set({ loading: val }),
  getData: async () => {
    // Read from state in actions
    try {
      get().setLoading(true);
      await sleep(1000);
      const { data } = await getUserInfo<User[]>();
      set({ list: data, loading: false }) // Object.assing({}, state, nextState)
    } catch (e) {
      console.error(e);
      get().setLoading(false);
    }
  }
}));

useStore：

import React from "react";
import shallow from 'zustand/shallow'
import Count from './Count';
import useStore from '../store';
import './style.css';
function App() {
  // re-renders the component when either state.loading or state.list change;
  const { loading, list } = useStore(({ loading, list }) => ({ loading, list }), shallow);
  // Getting non-reactive fresh state
  const { reduce, increase, getData, reset } = useStore.getState();
  const handleFetchData = () => {
    getData();
  }
  console.log("loading or list change~", loading, list);
  ...
}
export default App

点评反思

1. Vanilla 层是发布订阅模式的完结，供给了setState、subscribe 和 getState 办法，而且前两者供给了 selector 和 equalityFn 参数，以供在只要原生 JS 模式下的正常运用，但 React 的运用过程中根本只会用该模块的发布订阅功能。

2. React 层是 Zustand 的中心，完结了 reselect 缓存和注册事情的 listener 的功能，而且经过 forceUpdate 对组件进行重烘托。

3. 积极拥抱hooks，不需求运用context providers包裹运用，遵从大道至简的准则，上手简略；

4. 除了官方完结的一些经典middleware外，全体生态一般，等待后续会有更多最佳实践。

小结一下：

Zustand是2021 年 Star 增加最快的React状况办理库，规划理念函数式，全面拥抱hooks，API 规划的很高雅，对事务的侵入小，学习的心智负担低，引荐运用。

Recoil

recoil是facebook旗下的工作室在2020年推出的一个新型的状况办理库，因为和react师出同门，所以自然引得了更多的重视，相对于依据目标结构的会集办理状况，recoil选用的是涣散办理原子状况的规划模式，其中心概念只要 Atom(原子状况) 和 Selector(派生状况)，把握即可上手。

API 概览：

中心过程：

1. 在React的App组件中运用RecoilRoot进行包裹；

2. 界说atom原子状况，需求供给key和默认值，能够被恣意组件订阅；

3. 依据atom界说的状况能够运用selector派生，相似redux中的reselect或mobx的computed；

4. 在组件用可经过useRecoilState(读/写)，useRecoilValue(读)，useSetRecoilState(写)操作状况。

5. 不必感知同步异步操作，async get回调中回来promise状况即可，能够与Suspense合作运用。

代码完结

recoilRoot

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RecoilRoot } from "recoil";
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
)

atom + selector：

import {atom, selector, selectorFamily, useRecoilCallback} from "recoil";
import { getUserInfo, sleep } from "@smt/utils";
import { User } from "./type";
export const bearsState = atom<number>({
  key: 'bears', // 仅有标识
  default: 0, // 默认值
});
export const loadingState = atom<boolean>({
  key: 'loading', // 仅有标识
  default: false, // 默认值
});
export const listState = atom<User[]>({
  key: "list",
  default: []
});
export const bearsChangeState = selector({
  key: 'bearsStrState',
  get: ({get}) => {
    const text = get(bearsState);
    return text;
  },
  set:({set, reset, get}, newValue) => {
    set(bearsState, newValue)
  }
});
export const userListQuery = () => {
  return useRecoilCallback(({ set, snapshot: { getPromise } }) => async (id: number) => {
    set(loadingState, true);
    await sleep(1000);
    const response = await getUserInfo<User[]>({id});
    set(loadingState, false);
    set(listState, response.data);
  }, []);
};

useRecoilValue：

import React from "react";
import {
  useRecoilState,
  useRecoilValue,
  useSetRecoilState
} from "recoil";
import {
  bearsChangeState,
  loadingState,
  userListQuery,
  listState,
  userInitQueryState
} from '../store';
import Count from './Count';
import './style.css'
function App() {
  const setText = useSetRecoilState(bearsChangeState);
  const [list, setList] = useRecoilState(listState);
  const loading = useRecoilValue(loadingState);
  const userListFetch = userListQuery();
  const fetchData = () => {
    userListFetch(1);
  };
  ......
}
export default App

点评反思：

1. 依据atom()完结的state能够做到读与写分离，完结按需烘托；

2. 原子存储的数据相互间无相关，相关的数据运用派生值的办法推导，不必考虑store的结构安排；

3. 彻底拥抱函数式的 Hooks 运用办法，统筹了读写操作的场景。

小结一下：

Recoil选用与React一样的工作办法与原理，在新特性上支撑杰出，针对派生数据（Derived data）和异步查询选用纯函数以及高效订阅的办法进行处理，在模式规划和创新性上仍是可圈可点的。

Jotai

jotai是一个非常灵敏轻巧的库，和前面的提到的zustand师出同门，依据原始hooks办法供给基础能力，一起能够灵敏安排多个atom来创立新的atom，并支撑异步处理。

jotai能够看作是recoil的简化版本，都是选用涣散办理原子状况的规划模式，可是相较于recoil更简练，不需求显性运用selector。

API 概览：

中心过程：

1. 在React的App组件中运用Provider进行包裹；示例

2. 界说atom原子状况，需求供给默认值，能够被恣意组件订阅；

3. 依据atom界说的状况能够运用get办法派生，const newAtom = atom(get => get(baseAtom).toUpperCase());

4. 在组件用可经过useAtom(读/写)，useAtomValue(读)，useSetAtom(写)操作状况。

5. 不必感知同步异步操作，async get回调中回来promise状况即可，能够与Suspense合作运用。

代码完结：

Store:

import { atom } from "jotai";
import { getUserInfo, sleep } from "@smt/utils";
import { User } from "./type";
export const listAtom = atom<User[]>([]);
export const bearsAtom = atom<number>(0);
export const bearsRenderAtom = atom<string>((get) => `Result：${get(bearsAtom)}`);
export const loadingAtom = atom<boolean>(false);
export const fetchListAtom = atom(
  (get) => get(listAtom),
  async (_get, set, params) => {
    set(loadingAtom, true);
    await sleep(1000);
    try {
      const response = await getUserInfo<User[]>(params)
      set(listAtom, response.data);
    }catch (e){
      console.error(e);
    }finally {
      set(loadingAtom, false);
    }
  }
)

Provider:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'jotai';
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>
);

useAtomValue:

import React from "react";
import { useAtom, useSetAtom, useAtomValue} from "jotai";
import {bearsAtom, loadingAtom, fetchListAtom, listAtom} from '../store';
import Count from './Count';
import './style.css'
function App() {
  const setText = useSetAtom(bearsAtom);
  const [list, fetchList] = useAtom(fetchListAtom);
  const setList = useSetAtom(listAtom);
  const loading = useAtomValue(loadingAtom);
  ......
}
export default App

点评反思：

1. 原始：API 都是以 Hooks 办法供给，运用办法相似于 useState，useReducer；

2. 灵敏：可组合多个atom派生出新的atom，不必感知同步异步；

3. 全面：官方的文档和示例给的都比较丰富，参阅上手非常简略。

4. 兼容：可调配redux，zustand，xstate等其他状况库混合运用。

小结一下：

Primitive and flexible state management for React。

Pinia

Pinia.js 是新一代的状况办理器，由 Vue.js团队中成员所开发的，也被认为是下一代的 Vuex，相较于React社区的野蛮成长，Vue团队把状况办理东西录入到了官方团队进行保护，而且尽可能多地降低新用户上手门槛，相对于经典Vuex的语法上手会更简略。

API 概览：

中心过程：

1. 创立store：新建 src/store 目录并在其下面依据createPinia()创立 index.ts，导出 store；

2. 界说state：依据defineStore()界说state的数据结构；

3. 读写state：用好getter，setter，action三个办法即可，能够参阅文档介绍；

4. 运用state：能够用useStore()或许computed()的办法调用，默认对state解构会使其失去呼应式，能够用storeToRefs进行优化处理；

代码完结：

Store:

import { defineStore } from 'pinia';
import { User, Counter } from './type';
import { getUserInfo, sleep } from "@smt/utils";
export const useCountStore = defineStore({
  id: "count",
  state: (): Counter => ({
    loading: false,
    list: [],
    bears: 0,
  }),
  getters: {
    getBears(): string {
      return `Result:${this.bears}`;
    }
  },
  actions: {
    increase() {
      this.bears+=1;
    },
    reduce() {
      this.bears-=1;
    },
    reset() {
      this.list = [];
      this.bears = 0
    },
    async updateList(id: number) {
      this.loading = true;
      await sleep(1000);
      const response = await getUserInfo<User[]>({id});
      if (response.code === 0){
        this.list = response.data;
        this.loading = false;
      }
      return response;
    }
  },
});

useStore:

<template>
  <h1>{{ msg }}</h1>
  <div class="result">count is: {{ bears }}</div>
  <pre class='code'>{{ loading ? 'loading...' : JSON.stringify(list) }}</pre>
  <div class="btn-box">
    <button type="button" @click="handleIncrease">increase</button>
    <button type="button" @click="handleReduce">reduce</button>
    <button type="button" @click="handleFetch">fetch</button>
    <button type="button" @click="handleReset">reset</button>
  </div>
</template>
<script setup lang="ts">
import { ref, defineProps } from "vue"
import { storeToRefs } from 'pinia';
import { useCountStore } from '../store/modules/count';
defineProps<{ msg: string }>()
const countStore = useCountStore();
const { bears, loading, list } = storeToRefs(countStore);
const handleIncrease = () => {
  countStore.increase();
}
const handleReduce = () => {
  countStore.reduce();
}
const handleFetch = () => {
  countStore.updateList(1);
}
const handleReset = () => {
  countStore.reset();
}
</script>

点评反思：

1. 完好的 typescript 的支撑，完美贴合Vue3的写法；

2. 去除 mutations，commit，只要 state，getters，actions；

3. actions 支撑同步和异步；

4. 没有模块嵌套，只要 store 的概念，store 之间能够自由运用，更好的代码分割；

小结一下：

没有炫技成分，全部以满意实践需求动身，API简略，开箱即用，更多操作可直接：上手体会。

Xstate

XState是一个依据有限状况机的完结的状况办理东西，应对程序中状况改动切换行为的场景，并能够经过图形化的办法转换为状况图的形式，全体功能非常强壮，首要适合需求用到频频切换状况机的场景，例如：红绿灯，游戏场景，订单下单过程等。

API 概览：

中心过程：

1. 规划状况机逻辑，需求先了解有限状况界说、状况搬运、状况对应行为等根本概念，此外也主张学习状况模式和策略模式；

2. 运用useMachine()对状况机进行调用；

3. 具体学习主张参阅：Xstate简介、Xstate实践

代码完结：

machine:

interface Count {
  count: number;
};
export const countMachine = createMachine<Count>({
  id: "counter",
  initial: "init",
  context:{
    count: 0,
  },
  states: {
    init: {
      on: {
        ADD: "add",
        REDUCE: "reduce",
      },
      entry: assign({ count: (ctx) => ctx.count = 0 }),
    },
    add: {
      on: {
        ADD: {
          // target: "add",
          actions: assign({ count: (ctx) => ctx.count + 1 }),
        },
        REDUCE: "reduce",
        RESET: "init"
      },
      entry: assign({ count: (ctx) => ctx.count + 1 }),
    },
    reduce: {
      on: {
        REDUCE: {
          // target: "reduce",
          actions: assign({ count: (ctx) => ctx.count - 1 }),
        },
        ADD: "add",
        RESET: "init"
      },
      entry: assign({ count: (ctx) => ctx.count - 1 }),
    },
  },
}, {
  actions: {
    resetAll: () => console.log('reset all state!')
  }
});

useMachine：

import React from "react";
import { useMachine } from "@xstate/react";
import { countMachine } from '../store';
import './style.css'
function App() {
  const [state, send] = useMachine(countMachine);
  const { count } = state.context;
  console.log('state at:', state.value);
  const inrease = () => {
    send("ADD")
  };
  const reduce = () => {
    send("REDUCE")
  };
  const resetAll = () => {
    send("RESET")
  };
  ........
}

点评反思：

1. Redux的定位是运用的数据容器，致力于保护状况，首要处理组件通讯、状况同享的问题；

2. XState愈加重视于状况机，致力于状况驱动，可是也能够完结组件通讯和状况同享的功能

3. Xstate与结构无关，在React和Vue中均能够无缝集成运用；

小结一下：

xstate的运用介绍都在官方文档中，内容详实，介绍全面，主张仔细阅读。

写在最终

结合上面的介绍，不难发现每一种状况库都有自己的特征和运用场景，能够参阅如下的流程来选择一款适宜的状况库来调配项目工程，结合实践的运用经验，咱们的主张是：即用即走，自治优先，不要让本来为办理大局状况的规划，侵入太多到你的事务开发中！！！