Reactの国家管理について知る必要があるすべて！-jsチュートリアル-php.cn

Reactの国家管理について知る必要があるすべて！

Barbara Streisand

リリース： 2025-01-26 06:30:10

オリジナル

661 人が閲覧しました

All you need to know about state management in React!

開発者の皆さん！ Lucky Jain はここで、React 状態管理の明確なガイドを提供します。小道具の穴あけや複雑な状態管理ツールに圧倒されていませんか?この内訳によりプロセスが簡素化されます。

状態管理を選択する理由

React はインタラクティブな UI に優れていますが、大規模なアプリで状態を管理するのは困難になります。恐ろしい「プロップドリル」により、コードの保守は悪夢のようなものになります。状態管理ソリューションはライフラインを提供します!

多くのオプションが存在しますが、ここでは Context API と Redux Toolkit という 2 つの一般的な選択肢に焦点を当てます。

Context API: React の組み込みソリューション

Context API は React のネイティブ状態管理ソリューションであり、より単純なアプリケーションに最適です。

いつ使用するか:

テーマ、認証、言語設定などのデータを共有します。
小規模から中規模のプロジェクト。

仕組み:

基本的に、Context API はアプリケーション内の任意のコンポーネントにアクセスできるグローバル変数を作成します。

コード例 (テーマ管理):

<code class="language-javascript">import React, { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");
  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// ... rest of the components using useContext(ThemeContext)</code>

ログイン後にコピー

長所:

シンプルで実装が簡単です。
外部ライブラリは必要ありません。

短所:

深くネストされたコンポーネント構造ではパフォーマンスが低下する可能性があります。
複雑な状態ロジックの管理には適していません。

Redux ツールキット: 強力なツール

大規模で複雑なアプリケーションにとって、Redux Toolkit は状況を一変させます。 Redux 開発を合理化し、ボイラープレートコードを排除します。

いつ使用するか:

複雑な状態の相互作用を伴うアプリ。
非同期アクション用のミドルウェアを必要とするアプリケーション。

仕組み:

Redux Toolkit は、必須の Redux ツールを 1 つのパッケージに統合し、セットアップと使用法を簡素化します。

コード例 (単純なカウンター):

(1. インストール): npm install @reduxjs/toolkit react-redux

(2. スライスの作成): counterSlice.js

<code class="language-javascript">import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    reset: (state) => { state.value = 0; },
  },
});

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;</code>

ログイン後にコピー

(3. ストア構成): store.js

<code class="language-javascript">import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";

const store = configureStore({
  reducer: { counter: counterReducer },
});

export default store;</code>

ログイン後にコピー

(4. コンポーネントの使用法): App.js

<code class="language-javascript">import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, reset } from "./features/counter/counterSlice";

// ... component using useSelector and useDispatch</code>

ログイン後にコピー

長所: