【整理分享】7個熱門的React狀態管理工具

最近在做專案技術堆疊整理工作；

由於團隊越來越大、人員增多、專案增多；

統一技術堆疊是一件非常有必要的事；

React 狀態管理工具有很多，但是選擇一個合適的狀態管理工具其實很重要；

今天跟大家分享我整理的幾個非常熱門的React狀態管理，希望對你有幫助。

【 1. Mobx 】

#Mobx

MobX 可以獨立於React 運作, 但是他們通常是結合在一起使用；新版的mobx-react-lite 庫非常輕量；使用時只需要使用導出的observer包裹組件； 然後引入狀態即可；

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

class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increaseTimer() {
        this.secondsPassed += 1
    }
}

const myTimer = new Timer()

//被`observer`包裹的函数式组件会被监听在它每一次调用前发生的任何变化
const TimerView = observer(({ timer }) => 
           <span>Seconds passed: {timer.secondsPassed}
</span>)

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

【 2. Redux 】

Redux

Redux 也是一個非常流行的狀態管理，只不過比起其他的狀態管理工具，會顯得笨重一些；當然喜歡使用Redux的人也會覺得Redux 非常的優雅；

import { createStore } from 'redux'

/**
 * This is a reducer - a function that takes a current state value and an
 * action object describing "what happened", and returns a new state value.
 * A reducer's function signature is: (state, action) => newState
 *
 * The Redux state should contain only plain JS objects, arrays, and primitives.
 * The root state value is usually an object. It's important that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * You can use any conditional logic you want in a reducer. In this example,
 * we use a switch statement, but it's not required.
 */
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// There may be additional use cases where it's helpful to subscribe as well.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

想要很快上手Redux 不是一件容易的事，還需要仔細琢磨一下； 不過好在redux官方推出了新的Redux-tookit大大簡化了使用Redux的步驟。

【 3. Rematch 】

#Rematch

Rematch 延續了Redux的優點，核心概念還是基於Redux；但是比起Redux，它簡直太強大了！ 。

import { createModel } from "@rematch/core";
import { RootModel } from ".";

export const count = createModel<RootModel>()({
  state: 0, // initial state
  reducers: {
    // handle state changes with pure functions
    increment(state, payload: number) {
      return state + payload;
    },
  },
  effects: (dispatch) => ({
    // handle state changes with impure functions.
    // use async/await for async actions
    async incrementAsync(payload: number, state) {
      console.log("This is current root state", state);
      await new Promise((resolve) => setTimeout(resolve, 1000));
      dispatch.count.increment(payload);
    },
  }),
});

以下是Rematch 的一些特性：

• 小於2kb的大小
• 不需要設定
• 減少Redux樣板檔
• #內建副作用支援
• React Devtools支援
• TypeScript 原生支援
• 支援動態新增reducers
##支援熱重載
• #允許建立多個store
• 支援React Native
• 可擴充的外掛程式

Rematch 的store還是延續了一些Redux的寫法，只不過總體是精簡了許多。想要上手也是非常輕鬆的。

【 4. Recoil 】

#Recoil

Recoil 提供了一個新的狀態管理模型— —Atom模型，它可以更好地處理複雜的狀態邏輯。

如需在元件中使用 Recoil，則可以將 RecoilRoot 放置在父元件的某個位置。將他設為根元件為最佳：

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

一個 

atom 代表一個狀態。 Atom 可在任意元件中進行讀寫。讀取atom 值的元件隱含訂閱了該atom，因此任何atom 的更新都會致使使用對應atom 的元件重新渲染；

使用atom狀態，需要在元件內引入useRecoilState：

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

【 5. Hookstate 】

#hookState

HookState 也是一個非常簡單的狀態管理工具庫，它直覺的Api，供你輕鬆的存取狀態；

它的主要特點包括：

建立全域狀態
• #建立內部狀態
• 巢狀狀態
• 局部狀態
• 空狀態

#HookState 主要包括兩個重要的Api HookState、useHookState。

如果還需要其他功能，可以參考官方提供的其他更多Api。

【 6. Jotai 】

#Jotai

Jotai 是一個React 的原始和靈活的狀態管理庫。它類似於 Recoil，但具有更小的套件大小 、更簡約的 API、更好的 TypeScript 支援、更廣泛的文件以及沒有實驗性標籤。

使用Jotai，你可以將狀態儲存在單一的store中，並使用自訂的hooks來存取和更新狀態。

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <h1 id="Count-nbsp-count">Count: {count}</h1>

      <button onClick={() => setCount(count + 1)}>Increment</button>

      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

以上是Jotai的使用範例程式碼，使用Jotai非常簡單。

【 7.Zustand】

#Zustand 提供了一個簡單的方式來管理React應用程式中的狀態。

它的主要特點是易於使用和輕量級。

Zustand Code

使用Zustand，你可以将状态存储在一个单一的store中，并使用自定义的hooks来访问和更新状态。这使得状态管理变得非常简单和直观。

import create from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

function Counter() {
  const { count, increment, decrement } = useStore()

  return (
    <div>
      <h1 id="Count-nbsp-count">Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

使用Zustand也非常的简单！

在这个例子中，我们使用 create 函数创建了一个新的store，

并定义了一个名为 count 的状态和两个更新状态的

函数 increment 和 decrement 。

然后，我们使用 useStore 自定义 hook 来访问和更新状态。

【以上7个状态管理工具各有特点】

考虑到团队人员技术的参差不齐，未来项目的可维护、延展性；

建议大家选择入门简单，上手快的工具；

因为之前最早我们选择的是Redux，现在再回头看原来的项目，简直难以维护了。

如果你的团队还是倾向于Redux，这里建议还是使用Rematch比较好。

如果是还没使用状态管理，又想用的，建议使用mobx吧！

（学习视频分享：编程基础视频）

以上是【整理分享】7個熱門的React狀態管理工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！