React?狀態(tài)管理工具優(yōu)劣勢示例分析

更新時間：2023年01月13日 09:32:42 作者：AwesomeDevin

這篇文章主要為大家介紹了React?狀態(tài)管理工具優(yōu)劣勢示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

什么是狀態(tài)管理?

“狀態(tài)”是描述應用程序當前行為的任何數據。這可能包括諸如“從服務器獲取的對象列表”、“當前選擇的項目”、“當前登錄用戶的名稱”和“此模式是否打開？”等值。

眾所周知，我們在研發(fā)一個復雜應用的過程中，一套好的狀態(tài)管理方案是必不可少的，既能提升研發(fā)效率，又能降低研發(fā)維護成本，那么狀態(tài)管理方案那么多，它們有什么不同，我們又該如何選擇適合當前應用的方案呢？

本期將主要就 react 的常用狀態(tài)管理方案進行對比分析，希望對各位看客有幫助。

React 狀態(tài)管理方案

方案對比

框架	原理	優(yōu)點	缺點
hooks context	基于 react hook，開發(fā)者可實現內/外部存儲	1. 使用簡單 2. 不需要引用第三方庫，體積最小 3. 支持存儲全局狀態(tài)，但在復雜應用中不推薦 4. 不依賴 react 上下文，可在組件外調用（外部存儲的條件下）	1. context value發(fā)生變化時，所有用到這個context的組件都會被重新渲染，基于 content 維護的模塊越多，影響范圍越大。 2. 使用依賴 provider，修改 store 無法在應用最頂層(App.tsx 層級)觸發(fā)渲染 3. 受ui框架約束(react) 4. 依賴hooks調用
react-redux	Flux思想，發(fā)布訂閱模式，遵從函數式編程，外部存儲	1. 不依賴 react 上下文，可在組件外調用 2. 支持存儲全局狀態(tài) 3.不受ui框架約束	1. 心智模型需要一些時間來理解，特別是當你不熟悉函數式編程的時候 2. 編碼繁瑣
mobx	觀察者模式 + 數據截止，外部存儲	1. 使用簡單 2. 不依賴 react 上下文，可在組件外調用 3. 支持存儲全局狀態(tài) 4.不受ui框架約束	1.可變狀態(tài)模型，某些情況下可能影響調試 2. 除了體積相對較大之外，筆者目前未感覺到較為明顯的缺點，3.99M
zustand	Flux思想，觀察者模式，外部存儲	1. 輕量，使用簡單 2. 不依賴 react 上下文，可在組件外調用 3. 支持存儲全局狀態(tài)	1.框架本身不支持 computed 屬性，但可基于 middleware 機制通過少量代碼間接實現 computed ，或基于第三方庫 zustand-computed 實現 2.受ui框架約束(react / vue)
jotai	基于 react hook，內部存儲	1. 使用簡單 2. 組件顆粒度較細的情況下，jotai性能更好 3.支持存儲全局狀態(tài)，但在復雜應用中不推薦	1. 依賴 react 上下文，無法組件外調用，相對而言, zustand 在 react 環(huán)境外及全局可以更好地工作 2. 受ui框架約束(react)
valtio	基于數據劫持，外部存儲	1. 使用簡單，類mobx（類vue）的編程體驗 2.支持存儲全局狀態(tài) 3.不依賴 react 上下文，可在組件外調用 4. 不受ui框架約束	1.可變狀態(tài)模型，某些情況下可能影響調試 2.目前筆者沒發(fā)現其它特別大的缺點，個人猜測之所以star相對zustand較少，是因為 valtio 的數據雙向綁定思想與 react 存在沖突。

Source

hooks context

1.使用 react hooks + context 進行方便快捷的狀態(tài)管理

2.使用 react hooks + context 構建 redux 進行狀態(tài)管理

react-redux

mobx

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"
// 狀態(tài)及相關事件
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)
// 觸發(fā)更新事件
setInterval(() => {
    myTimer.increase()
}, 1000)

zustand

import { create } from 'zustand'
// 狀態(tài)及相關事件
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>
}
// 觸發(fā)更新事件
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() {
  // 狀態(tài)及相關事件
  const [count, setCount] = useAtom(countAtom)
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
    </h1>
  )
}

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>
  )