【整理分享】7个热门的React状态管理工具

import React from "react"import ReactDOM from "react-dom"import { makeAutoObservable } from "mobx"import { observer } from "mobx-react-lite"class Timer {    secondsPassed = 0    constructor() {        makeAutoObservable(this)    }    increaseTimer() {        this.secondsPassed += 1    }}const myTimer = new Timer()//被`observer`包裹的函数式组件会被监听在它每一次调用前发生的任何变化const TimerView = observer(({ timer }) =>            <span>Seconds passed: {timer.secondsPassed}</span>)ReactDOM.render(<TimerView timer={myTimer} />, document.body)

import { createStore } from 'redux'/** * This is a reducer - a function that takes a current state value and an * action object describing "what happened", and returns a new state value. * A reducer's function signature is: (state, action) => newState * * The Redux state should contain only plain JS objects, arrays, and primitives. * The root state value is usually an object. It's important that you should * not mutate the state object, but return a new object if the state changes. * * You can use any conditional logic you want in a reducer. In this example, * we use a switch statement, but it's not required. */function counterReducer(state = { value: 0 }, action) {  switch (action.type) {    case 'counter/incremented':      return { value: state.value + 1 }    case 'counter/decremented':      return { value: state.value - 1 }    default:      return state  }}// Create a Redux store holding the state of your app.// Its API is { subscribe, dispatch, getState }.let store = createStore(counterReducer)// You can use subscribe() to update the UI in response to state changes.// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.// There may be additional use cases where it's helpful to subscribe as well.store.subscribe(() => console.log(store.getState()))// The only way to mutate the internal state is to dispatch an action.// The actions can be serialized, logged or stored and later replayed.store.dispatch({ type: 'counter/incremented' })// {value: 1}store.dispatch({ type: 'counter/incremented' })// {value: 2}store.dispatch({ type: 'counter/decremented' })// {value: 1}

import { createModel } from "@rematch/core";import { RootModel } from ".";export const count = createModel<RootModel>()({  state: 0, // initial state  reducers: {    // handle state changes with pure functions    increment(state, payload: number) {      return state + payload;    },  },  effects: (dispatch) => ({    // handle state changes with impure functions.    // use async/await for async actions    async incrementAsync(payload: number, state) {      console.log("This is current root state", state);      await new Promise((resolve) => setTimeout(resolve, 1000));      dispatch.count.increment(payload);    },  }),});

import React from 'react';import {  RecoilRoot,  atom,  selector,  useRecoilState,  useRecoilValue,} from 'recoil';function App() {  return (    <RecoilRoot>      <CharacterCounter />    </RecoilRoot>  );}

const textState = atom({  key: 'textState', // unique ID (with respect to other atoms/selectors)  default: '', // default value (aka initial value)});function CharacterCounter() {  return (    <div>      <TextInput />      <CharacterCount />    </div>  );}function TextInput() {  const [text, setText] = useRecoilState(textState);  const onChange = (event) => {    setText(event.target.value);  };  return (    <div>      <input type="text" value={text} onChange={onChange} />      <br />      Echo: {text}    </div>  );}

import { atom, useAtom } from 'jotai';const countAtom = atom(0);function Counter() {  const [count, setCount] = useAtom(countAtom);  return (    <div>      <h1>Count: {count}</h1>      <button onClick={() => setCount(count + 1)}>Increment</button>      <button onClick={() => setCount(count - 1)}>Decrement</button>    </div>  );}

import create from 'zustand'const useStore = create((set) => ({  count: 0,  increment: () => set((state) => ({ count: state.count + 1 })),  decrement: () => set((state) => ({ count: state.count - 1 })),}))function Counter() {  const { count, increment, decrement } = useStore()  return (    <div>      <h1>Count: {count}</h1>      <button onClick={increment}>Increment</button>      <button onClick={decrement}>Decrement</button>    </div>  )}