okgoes
🔍
← 目录从零开始学习React
✏️ 编辑

状态管理

2024/9/21

在 React 中，管理组件间的数据传递是一个非常常见的需求。从简单的父子组件数据传递，到跨组件或深层嵌套组件的数据共享，React 提供了多种状态管理的解决方案。本文将介绍以下内容：

  1. 父子组件的数据传递
  2. Context API：适用于较简单的全局状态管理
  3. Redux：更复杂的状态管理工具，适合中大型应用
  4. Redux Toolkit：Redux 的官方工具包，简化 Redux 的开发流程

1. 父子组件间的数据传递

在 React 中，父子组件之间的数据传递是通过props实现的。

1.1 父组件向子组件传递数据

jsx
import React from 'react';

function Child({ message }) {
  return <h2>{message}</h2>;
}

function Parent() {
  const greeting = "Hello from Parent!";
  return <Child message={greeting} />;
}

export default Parent;
  • 父组件 Parent 通过 props 将数据传递给子组件 Child。
  • 子组件 Child 接收 message 作为 props，并在 JSX 中渲染。

1.2 子组件向父组件传递数据

可以通过将一个回调函数作为 props 传递给子组件，实现子组件向父组件传递数据。

jsx
import React, { useState } from 'react';

function Child({ sendMessage }) {
  return <button onClick={() => sendMessage("Message from Child")}>Send Message</button>;
}

function Parent() {
  const [message, setMessage] = useState("");

  return (
    <div>
      <h2>{message}</h2>
      <Child sendMessage={setMessage} />
    </div>
  );
}

export default Parent;
  • 父组件通过 sendMessage 回调函数接收来自子组件的消息。

2. Context API

Context API 允许我们在组件树中无须通过每一层 props 的逐级传递，直接共享数据。它适合跨越多个组件层级的简单状态共享，比如主题、语言或用户信息。

2.1 创建和使用 Context

jsx
import React, { useState, createContext, useContext } from 'react';

// 创建 Context
const MyContext = createContext();

function Child() {
  // 使用 useContext Hook 获取上下文的值
  const message = useContext(MyContext);
  return <h2>{message}</h2>;
}

function Parent() {
  const [message, setMessage] = useState("Hello from Context!");

  return (
    <MyContext.Provider value={message}> {/* 提供上下文数据 */}
      <Child />
    </MyContext.Provider>
  );
}

export default Parent;
  • createContext：创建一个上下文。
  • MyContext.Provider：通过 Provider 组件将数据注入到整个子树中。
  • useContext：子组件中使用 useContext 获取 MyContext 中的数据。

2.2 Context API 的场景

  • 主题管理（比如切换暗黑模式和浅色模式）
  • 用户登录状态或权限管理
  • 多语言支持

优点：

  • 适合中小型项目中需要在多个组件间共享全局状态的场景。

缺点：

  • 随着项目的复杂度增加，Context API 容易产生"prop drilling"（状态提升和逐级传递问题），状态管理不够集中。

3. Redux 基础概念与使用

Redux 是一种集中化状态管理的方案，适用于需要在多个地方使用和共享复杂状态的大型应用。它通过"单一数据源"来管理整个应用的状态，确保状态流动的可控性和可预测性。

3.1 Redux 核心概念

  • Store：保存整个应用的状态。
  • Action：表示要执行的操作（如增、删、改），通过 dispatch 发送给 reducer。
  • Reducer：接收 action 并基于当前的 state 返回一个新的 state。
  • Dispatch：触发 action，将操作传递给 reducer 进行处理。

3.2 简单 Redux 示例

bash
npm install redux react-redux

Step 1: 创建 reducer 来处理状态

javascript
// counterReducer.js
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

export default counterReducer;

Step 2: 创建 store

javascript
import { createStore } from 'redux';
import counterReducer from './counterReducer';

const store = createStore(counterReducer);

export default store;

Step 3: 使用 Provider 使应用能够访问 store

jsx
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

Step 4: 使用 useSelector 和 useDispatch 与 Redux 进行交互

jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector((state) => state.count); // 从 Redux 中获取状态
  const dispatch = useDispatch(); // 派发 action

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

4. 工具链：Redux Toolkit

为了简化 Redux 的开发，Redux 团队推出了 Redux Toolkit，它封装了 Redux 的常用功能，减少了样板代码。

4.1 安装 Redux Toolkit

bash
npm install @reduxjs/toolkit react-redux

4.2 Redux Toolkit 示例

Step 1: 使用 configureStore 和 createSlice

javascript
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      state.count += 1;
    },
    decrement(state) {
      state.count -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;

const store = configureStore({
  reducer: counterSlice.reducer,
});

export default store;

Step 2: 在组件中使用 useSelector 和 useDispatch

jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store';

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

4.3 Redux Toolkit 的优点

  • 简化 reducer：无需手动处理 switch 语句，直接使用 createSlice 创建切片。
  • 包含异步处理：集成了 createAsyncThunk 处理异步逻辑（如 API 请求）。
  • 预配置的 store：configureStore 默认配置了 Redux DevTools 和 middleware。

总结

  1. 父子组件数据传递：通过 props 实现父子组件间的数据传递。
  2. Context API：适合在中小型应用中全局共享状态，避免多层级 props 传递。
  3. Redux：集中化的状态管理工具，适用于中大型应用，特别是需要在不同页面共享复杂状态的场景。
  4. Redux Toolkit：Redux 的简化工具链，减少了样板代码，并简化了状态管理的流程。

Context API 和 Redux 各有优势。对于小型应用或状态传递较简单的场景，Context API 是一个轻量且便捷的选择。而对于复杂的大型应用，Redux 提供了更加集中化和结构化的状态管理方式，配合 Redux Toolkit 可以大幅提升开发效率。