7个热门的React状态管理工具-猿码集

React作为目前最热门的前端框架之一，提供了可重用性、可组合性和可维护性。而随着项目规模越来越大，组件之间的数据传递和状态管理也变得越来越重要。所以，本文将会介绍7个 React 状态管理工具，帮助读者更好地管理组件之间的状态。

1. Redux

1.1 介绍

Redux是一个开源的JavaScript状态容器，它提供可预测化状态管理。通过将所有状态放入一个统一的store当中，Redux允许开发人员呈现可预测的统一化的state，从而简化了应用中的状态管理。另外，Redux也很容易和其他视图库和框架进行集成，如React、Angular等。

1.2 核心概念

Redux包含三个核心概念：store，action和reducer。

store：一个存储着应用程序状态的对象。

action：一个传递新数据的JavaScript对象。

reducer：一个根据action类型来更新store状态的纯函数。

1.3 示例代码

const initialState = {
  count: 0
}
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      }
    case 'DECREMENT':
      return {
        count: state.count - 1
      }
    default:
      return state
  }
}
const store = createStore(reducer)
function increment() {
  store.dispatch({ type: 'INCREMENT' })
}
function decrement() {
  store.dispatch({ type: 'DECREMENT' })
}
console.log(store.getState())
store.subscribe(() => {
  console.log(store.getState())
})
increment()
increment()
decrement()

2. MobX

2.1 介绍

MobX是一个简单、可扩展的状态管理库，基于可观察对象，让您以声明性的方式编写代码。MobX自动跟踪状态变化并基于该变化重新运行相关的代码。它易于使用，具有出色的性能和可伸缩性。

2.2 核心概念

MobX包括三个核心概念：observable，action和reaction。

observable：任意JavaScript对象，通过@observable装饰器或observable()函数来定义。

action：一个修改observable的函数，通过@action装饰器或action()函数来定义。

reaction：观察者，在observable发生变化时自动执行的函数，通过autorun()函数来定义。

2.3 示例代码

import { observable, action, autorun } from 'mobx'
class Counter {
  @observable count = 0
  @action increment() {
    this.count++
  }
  @action decrement() {
    this.count--
  }
}
const counter = new Counter()
autorun(() => {
  console.log(counter.count)
})
counter.increment()
counter.increment()
counter.decrement()

3. Zustand

3.1 介绍

Zustand是一个小型的、快速的、独立的状态管理库，它具有与Redux相同的可预测性和可扩展性，并借鉴了Hooks的思想，提供了可挂钩式状态管理。

3.2 核心概念

Zustand的状态是通过使用useState，useReducer和useMemo等Hooks来管理的。它也提供了很多钩子，用于对状态的操作，比如useStore和useSelector。

3.3 示例代码

import create from 'zustand'
const useCounter = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))
function Counter() {
  const { count, increment, decrement } = useCounter()
  return (
    

      
Count: {count}

      
      
    

  )
}

4. Recoil

4.1 介绍

建立在React原生状态管理API之上，Recoil提供了一个简单、灵活且可扩展的状态管理框架。

4.2 核心概念

Recoil 包括两个核心概念：atom和selector。

atom：用于创建一个单一的状态源，类似于Redux的 store。

selector：通过存取其他 atom 和 selector（或异步请求等异步状态源）来创建衍生状态，类似于MobX的 computed。

4.3 示例代码

import { atom, useRecoilState } from 'recoil'
const countState = atom({
  key: 'count',
  default: 0
})
function Counter() {
  const [count, setCount] = useRecoilState(countState)
  const handleIncrement = () => setCount(count + 1)
  return (
    

      
Count: {count}

      
    

  )
}

5. Effector

5.1 介绍

Effector是一个强大的状态管理库，它通过创建信号、事件、effect和store等概念来组织应用程序的状态流，并提供了一些优秀的工具来处理异步流。

5.2 核心概念

Effector 主要包括五个核心概念：???signal、event、effect、store和domain。

signal: 抽象的状态单元。

event: 可以被触发（trigger）但是不能被取消（untrigger）的信号。

effect: 支持异步逻辑的特殊 kind of store。

store: 集成了可观察更改的状态，以及状态变化发生时需要运行的处理程序。

domain: 一组共享状态的 store 和其他 Effector 元素的集合。

5.3 示例代码

import { createStore, createEvent } from 'effector'
const increment = createEvent()
const counter = createStore(0)
  .on(increment, (state) => state + 1)
counter.watch((state) => console.log(state))
increment()
increment()

6.Valtio

6.1 介绍

Valtio 是一个小型、易于使用、基于代理的状态管理库，可帮助您在应用程序中管理状态。

6.2 核心概念

Valtio 的状态仅是一个普通的JavaScript对象，没有专用的命令或方法来操作它。通过使用ES6的Proxy机制来捕获对 Valito 状态的访问，并维护 React组件渲染的自动订阅。

6.3 示例代码

import { proxy, useProxy } from 'valtio'
const state = proxy({ count: 0 })
function Counter() {
  const snapshot = useProxy(state)
  const handleIncrement = () => {
    state.count++
  }
  return (
    

      
Count: {snapshot.count}

      
    

  )
}

7. Unstated

7.1 介绍

Unstated 是一个基于 React 的状态管理库，它提供容器和生成器，让开发者反转控制地管理组件之间的状态，并且支持热重载。

7.2 核心概念

Unstated 的核心概念是 Container 和 Subscribe，其中 Container 与 Redux 的 store 相似，子组件可以在订阅包含的状态之后进行访问，而 Subscribe 用于订阅 Container。

7.3 示例代码

import { Provider, Container, Subscribe } from 'unstated'
class CounterContainer extends Container {
  state = { count: 0 }
  increment() {
    this.setState({ count: this.state.count + 1 })
  }
  decrement() {
    this.setState({ count: this.state.count - 1 })
  }
}
function Counter() {
  return (
    
      {counter => (
        

          
Count: {counter.state.count}

          
          
        

      )}
    
  )
}
function App() {
  return (
    
      
    
  )
}

总结：本文介绍了7个 React 状态管理工具，包括Redux、MobX、Zustand、Recoil、Effector、Valtio和Unstated。每个工具都有其自己的优点和适用范围，开发人员可以根据应用程序的需求选择适合自己的工具。

7个热门的React状态管理工具