关于前端:前端状态管理React-状态管理工具如何选

什么是状态治理?

“状态”是形容应用程序以后行为的任何数据。这可能包含诸如“从服务器获取的对象列表”、“以后抉择的我的项目”、“以后登录用户的名称”和“此模式是否关上？”等值。

家喻户晓，咱们在研发一个 简单利用 的过程中，一套好的 状态治理计划 是必不可少的，既能 晋升研发效率，又能升高研发保护老本 ，那么状态治理计划那么多，它们有什么不同，咱们又该 如何抉择 适宜以后利用的计划呢？

本期将次要就 react 的罕用状态治理计划进行比照剖析，心愿对各位看客有帮忙。

React 状态治理计划

计划介绍

• hooks context
• react-redux
• mobx
• zustand
• jotai
• recoil
• 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>
  )
  }

• recoil

  const fontSizeState = atom({  
  key: 'fontSizeState',  
  default: 14,  
  });
  function FontButton() {const [fontSize, setFontSize] = useRecoilState(fontSizeState);  
  return (<button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>  
      Click to Enlarge  
    </button>  
  );  
  }

• 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
• recoil与 jotai 的编程思维相似，但提供了更多的 api 与 个性，针对原子状态领有更多的可操作性，同时包体积也更大，但因为 recoil 性能宏大，其应用绝对于 jotai 会繁琐一些, 如果你希望工程 笨重便捷 能够选用 jotai，如果你想试试原子状态更多的可能性，那么试试recoil 吧。

如果该文章对你有帮忙，请给我点个👍吧～
下期将带来 Vue 状态管理工具优劣势剖析, 欢送关注我的 Blog 🌟