您需要了解有关国家管理的所有内容！-js教程-PHP中文网

您需要了解有关国家管理的所有内容！

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。

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.安装）： 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>

登录后复制

优点：