React 状态管理工具优劣势示例分析

目录

• 什么是状态管理?
• React 状态管理方案
• 方案介绍
• 方案对比
• Source
• 相关建议

什么是状态管理?

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

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

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

React 状态管理方案

方案介绍

• hook context
• react-redux
• mobx
• zustand
• jotai
• valtio

方案对比

Source

• hooks context

1.使用 react hooks + context 进行方便快捷的状态管理

2.使用 react hooks + context 构建 redux 进行状态管理

react-redux

• mobx

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

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

相关建议

• 如果你需要useState+useContext的替代品，那么jotai非常适合，即少量组件间状态共享。
• 如果你习惯了redux或喜欢react的自然不可变更新，那么zustand将非常适合。
• 如果你习惯了vue/ slute /mobx，或者是JS/React的新手，valtio的可变模型将很适合。
• 如果你在使用 zustand(redux/等不可变数据模型) + immer，建议改用valtio(mobx)
• mobx有actions概念，而valtio概念更为简单（自由），如果你希望工程更为规范，可以使用mobx，如果是希望工程更为自由便捷，可以使用valtio

以上就是React 状态管理工具优劣势示例分析的详细内容，更多关于React 状态管理工具优劣势的资料请关注其它相关文章！