【整理と共有】人気のReact状態管理ツール7選

最近、プロジェクトのテクノロジー スタックの整理に取り組んでいます;

チームが大きくなるにつれて、人の数も増え、プロジェクトの数も増えます;

統合されたテクノロジー スタックは非常に必要なものです。

#React 状態管理ツールは数多くありますが、適切な状態管理ツールを選択することは実際には非常に重要です。

今日は私をフォローしてください。私がまとめた非常に人気のある React 状態管理をいくつか紹介したいと思います。

【 1. Mobx 】

Mobx

#MobX は React とは独立して実行できますが、通常は一緒に使用します。新しいバージョンの mobx-react-lite ライブラリは非常に軽量です。使用する場合は、エクスポートされたオブザーバー パッケージ コンポーネントを使用するだけで済みます。その後、状態を導入します。

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)

【 2 .Redux ]

Redux

Redux も非常に人気のある状態管理ツールですが、他の状態管理ツールよりも扱いが複雑です。もちろん気に入っています Redux を使用する人は、Redux が非常にエレガントであると感じるでしょう;

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}

Redux をすぐに使い始めるのは簡単ではなく、慎重に考える必要があります; しかし幸いなことに、redux は新しいRedux-tookit Redux を使用する手順が大幅に簡素化されています。

【 3. 再戦 】

再戦

再戦では、Redux の利点とコアコンセプトを継承します。は依然として Redux に基づいていますが、Redux と比較すると、単純に強力すぎます。 。

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

以下は Rematch の機能の一部です:

サイズは 2kb 未満です
• 設定は必要ありません
• Redux ボイラープレート ファイルを削減します
組み込みの副作用サポート
• React Devtools サポート
• TypeScript ネイティブ サポート
• リデューサーの動的追加をサポート
• ホット リロードをサポート
複数のストアの作成を許可
• React Native のサポート
• 拡張可能なプラグイン

Rematch のストアはまだ一部の Redux 記述メソッドを継続していますが、全体的にはさらに進化しています。合理化された。始めるのもとても簡単です。

【 4. Recoil 】

Recoil

Recoil は新しい状態管理モデルを提供します — —Atom モデル、複雑な状態ロジックをより適切に処理できます。

コンポーネントで Recoil を使用する必要がある場合は、親コンポーネントのどこかに RecoilRoot を配置できます。これをルート コンポーネントとして設定するのが最善です。

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

A

atom は state を表します。 Atom はどのコンポーネントからでも読み書きできます。アトム値を読み取るコンポーネントは暗黙的にアトムをサブスクライブするため、アトムが更新されると、アトムに対応するコンポーネントが再レンダリングされます;

アトム状態を使用するには、useRecoilState をコンポーネント:

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

【 5. Hookstate 】

hookState

HookState も非常に単純な状態です。状態に簡単にアクセスできる直感的な API 管理ツール ライブラリ。

その主な機能は次のとおりです:

グローバル状態の作成
内部状態の作成
• ネストされた状態
• 部分的な状態
• 空の状態

HookState には、主に 2 つの重要な API HookState と useHookState が含まれています。

他の機能が必要な場合は、他の公式 API を参照してください。

【 6. Jotai 】

Jotai

Jotai は、React ライブラリの原始的かつ柔軟な状態管理です。 。これは Recoil に似ていますが、パッケージ サイズが小さく、API がよりミニマルで、TypeScript のサポートが向上し、ドキュメントが充実しており、実験的なタグはありません。

Jotai を使用すると、状態を 1 つのストアに保存し、カスタム フックを使用して状態にアクセスして更新できます。

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

上記はJotaiを利用するためのサンプルコードですが、Jotaiの使い方はとても簡単です。

【 7. Zustand】

Zustand は、React アプリケーションの状態を管理する簡単な方法を提供します。

主な特徴は使いやすさと軽量です。

Zustand Code

使用Zustand，你可以将状态存储在一个单一的store中，并使用自定义的hooks来访问和更新状态。这使得状态管理变得非常简单和直观。

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

使用Zustand也非常的简单！

在这个例子中，我们使用 create 函数创建了一个新的store，

并定义了一个名为 count 的状态和两个更新状态的

函数 increment 和 decrement 。

然后，我们使用 useStore 自定义 hook 来访问和更新状态。

【以上7个状态管理工具各有特点】

考虑到团队人员技术的参差不齐，未来项目的可维护、延展性；

建议大家选择入门简单，上手快的工具；

因为之前最早我们选择的是Redux，现在再回头看原来的项目，简直难以维护了。

如果你的团队还是倾向于Redux，这里建议还是使用Rematch比较好。

如果是还没使用状态管理，又想用的，建议使用mobx吧！

（学习视频分享：编程基础视频）

以上が【整理と共有】人気のReact状態管理ツール7選の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。