快捷導(dǎo)航

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

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

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

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

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

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

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

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

方案對比

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

Source

hooks context

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

2.使用 react hooks + context 構(gòu)建 redux 進(jìn)行狀態(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)及相關(guān)事件
class Timer {
    secondsPassed = 0
    constructor() {
        makeAutoObservable(this)
    }
    increase() {
        this.secondsPassed += 1
    }
    reset() {
        this.secondsPassed = 0
    }
}
const myTimer = new Timer()
// 構(gòu)建可觀擦組件
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)及相關(guān)事件
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)及相關(guān)事件
  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>
  )