当前位置： 首页 > news >正文

大厂进阶七：React状态管理全解析

news 2025/6/27 7:15:12

前言：

React 中用于状态管理的hook及库有：useState、useReducer、useContext、useReducer + useContext和一些第三方的库如redux、mobx等。

1、useState

单一组件某个具体状态

2、useReducer

单一组件中多个状态管理，策略分发机制统一管理

3、useContext

创建了一个全局状态机制，可分发给下面所有的children

4、useReducer + useContext

使用 React.createContext 创建一个 Context 对象。这个 Context 将用于在组件树中传递全局状态和更新状态的方法，Context 通常会有一个 Provider 组件，Provider 组件内部，使用 useReducer 来管理全局状态

5、redux库

Redux 的原理是通过单一的不可变的存储中心（store）来保存应用的状态，利用纯函数（reducer）来处理状态的更新，借助 action 来描述状态的变化意图，实现了可预测的状态管理和组件之间的数据共享。

一、useReducer与useState区别

由于useReducer是用在单一组件中多个状态管理，是否可以用useState代替呢？
useReducer和useState在某些情况下可以相互替代，但它们也有一些不同之处：

1、功能和使用场景

1.1 useReducer通常适用于以下场景：

复杂的状态逻辑管理：

当状态的更新逻辑较为复杂，包含多个子状态之间的相互依赖关系或多个不同的操作类型时，useReducer可以使代码更清晰、更具可读性和可维护性。

共享状态逻辑：

如果多个组件需要共享相同的状态更新逻辑，useReducer可以将 reducer 函数提取出来，方便在不同组件中复用。

优化性能：

在某些情况下，useReducer会比useState更高效，特别是当状态更新频繁且计算量较大时，因为 reducer 函数通常是纯函数，React 可以更有效地进行优化。

1.2 useState则更适合以下场景：

简单的状态管理：

当状态更新逻辑比较简单，只有一个或几个基本的状态值需要管理时，useState是一个更直接和简洁的选择。

小型组件：

对于小型组件或不需要复杂状态管理的组件，useState的语法更简单，代码量更少。

2、代码结构和可读性

2.1 useReducer：

使用useReducer时，需要定义一个 reducer 函数来处理状态的更新。这个 reducer 函数接收当前的状态和一个动作（action）作为参数，并返回新的状态。

import { useReducer } from 'react';const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:return state;}
}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></div>);
}

这种方式将状态更新的逻辑集中在 reducer 函数中，使得代码结构更清晰，尤其是当状态更新逻辑复杂时，更容易理解和维护。

2.2 useState：

useState的语法相对简单，直接返回一个状态值和一个更新状态的函数。

import { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>+</button><button onClick={() => setCount(count - 1)}>-</button></div>);
}

对于简单的状态更新，`useState`的代码更简洁直观，易于理解。

3、性能优化方面

3.1 useReducer：

在某些情况下，useReducer可以更好地进行性能优化。因为 reducer 函数是纯函数，React 可以更容易地跟踪状态的变化，并根据需要进行优化。例如，当状态更新是基于前一个状态值计算时，useReducer可以确保每次更新都是基于最新的状态值，避免潜在的竞态条件。
如果状态更新的计算量较大，将计算逻辑放在 reducer 函数中，可以让 React 更好地理解状态的变化过程，从而进行更有效的优化。

3.2 useState：

useState在简单的状态更新场景下性能表现也很好。但如果在状态更新过程中存在复杂的计算或依赖关系，可能需要手动处理一些性能优化问题，比如使用useMemo或useCallback来避免不必要的重新渲染。

综上所述，虽然在单一组件中，对于简单的状态管理，useState可能更方便快捷，但对于复杂的状态逻辑和需要更好的性能优化的场景，useReducer是一个很好的选择。在实际开发中，可以根据具体的需求和项目特点来决定使用哪种方式。

二、 useReducer + useContext

以下是一个使用 useReducer 和 useContext 结合 TypeScript 来模拟类似 Redux 功能的代码示例：

1. 创建 types.ts 文件来定义接口和类型：

// 定义动作类型
export enum ActionTypes {INCREMENT = "INCREMENT",DECREMENT = "DECREMENT",
}// 定义状态接口
export interface IState {count: number;
}// 定义动作接口
export interface IAction {type: ActionTypes;
}

2. 创建 reducer.ts 文件来定义 reducer 函数：

import { IState, IAction, ActionTypes } from "./types";const initialState: IState = {count: 0,
};const reducer = (state: IState = initialState, action: IAction): IState => {switch (action.type) {case ActionTypes.INCREMENT:return { count: state.count + 1 };case ActionTypes.DECREMENT:return { count: state.count - 1 };default:return state;}
};export {reducer, initialState};

3. 创建 context.ts 文件来定义 Context 和 Provider：

import { createContext, useReducer, Dispatch } from "react";
import { IAction} from "./types";import {reducer, initialState}from "./reducer";// 创建 Context
export const StoreContext = createContext<{state: IState;dispatch: Dispatch<IAction>;
} | null>(null);// 创建 Provider 组件
export const StoreProvider: React.FC = ({ children }) => {const [state, dispatch] = useReducer(reducer, initialState);return (<StoreContext.Provider value={{ state, dispatch }}>{children}</StoreContext.Provider>);
};

4. 在组件中使用：

import React from "react";
import { StoreContext } from "./context";
import { useContext } from "react";const MyComponent: React.FC = () => {const { state, dispatch } = useContext(StoreContext)!;const increment = () => {dispatch({ type: ActionTypes.INCREMENT });};const decrement = () => {dispatch({ type: ActionTypes.DECREMENT });};return (<div><p>Count: {state.count}</p><button onClick={increment}>+</button><button onClick={decrement}>-</button></div>);
};export default MyComponent;

5. 在应用的入口文件中包裹：

import React from "react";
import ReactDOM from "react-dom";
import { StoreProvider } from "./context";
import MyComponent from "./MyComponent";ReactDOM.render(<StoreProvider><MyComponent /></StoreProvider>,document.getElementById("root")
);

在这个示例中，通过定义明确的接口和类型，使用 useReducer 和 useContext 来管理状态和提供状态给组件，模拟了类似 Redux 的状态管理模式。

三、使用 useReducer 和 useContext 实现的购物车

以下是一个使用 useReducer 和 useContext 实现的购物车案例：

1. 首先创建一个 Context：

import React from 'react';// 创建购物车上下文
const CartContext = React.createContext();

2. 定义 reducer 函数和初始状态：

// 初始购物车状态
const initialCartState = {items: [],
};// 购物车 reducer 函数
function cartReducer(state, action) {switch (action.type) {case 'ADD_ITEM':// 检查是否已存在该商品，若存在则增加数量，否则添加新商品const existingItemIndex = state.items.findIndex((item) => item.id === action.payload.id);if (existingItemIndex!== -1) {const updatedItems = [...state.items];updatedItems[existingItemIndex].quantity += 1;return {...state, items: updatedItems };} else {return {...state,items: [...state.items,{...action.payload, quantity: 1 },],};}case 'REMOVE_ITEM':return {...state,items: state.items.filter((item) => item.id!== action.payload),};default:return state;}
}

3. 创建 Provider 组件：

function CartProvider({ children }) {const [cartState, dispatch] = React.useReducer(cartReducer, initialCartState);const addItemToCart = (item) => {dispatch({ type: 'ADD_ITEM', payload: item });};const removeItemFromCart = (itemId) => {dispatch({ type: 'REMOVE_ITEM', payload: itemId });};const value = {cartState,addItemToCart,removeItemFromCart,};return (<CartContext.Provider value={value}>{children}</CartContext.Provider>);
}

4. 在组件中使用：

function Product({ product, addToCart }) {return (<div><h3>{product.name}</h3><p>{product.price}</p><button onClick={() => addToCart(product)}>添加到购物车</button></div>);
}function Cart() {const { cartState, removeItemFromCart } = React.useContext(CartContext);return (<div><h2>购物车</h2>{cartState.items.map((item) => (<div key={item.id}><p>{item.name} - 数量: {item.quantity}</p><button onClick={() => removeItemFromCart(item.id)}>从购物车中移除</button></div>))}</div>);
}function App() {return (<CartProvider><Productproduct={{ id: 1, name: '商品 1', price: 10 }}addToCart={(product) => addItemToCart(product)}/><Cart /></CartProvider>);
}export default App;

在这个例子中：

  • CartContext 用于创建购物车的上下文。
  • cartReducer 处理购物车状态的更新逻辑，包括添加商品和移除商品。
  • CartProvider 组件使用 useReducer 创建状态和 dispatch 函数，并将其和操作函数通过 CartContext.Provider 提供给子组件。
  • Product 组件表示一个商品，点击按钮可以将商品添加到购物车。
  • Cart 组件展示购物车中的商品，并提供移除商品的功能。

四、Redux

React 使用 Redux 进行状态管理的代码实例：

1. 首先安装必要的库：

npm install redux react-redux

2. 创建 Redux 的 store：

创建一个 store.js 文件：

import { createStore } from 'redux';// 定义初始状态
const initialState = {count: 0
};// 定义 reducer
const counterReducer = (state = initialState, action) => {switch (action.type) {case 'INCREMENT':return { count: state.count + 1 };case 'DECREMENT':return { count: state.count - 1 };default:return state;}
};// 创建 store
const store = createStore(counterReducer);export default store;

3. 创建 React 组件：

App.js：

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';const App = ({ count, increment, decrement }) => {return (<div><p>Count: {count}</p><button onClick={increment}>+</button><button onClick={decrement}>-</button></div>);
};// 从 Redux store 中获取 state 映射到组件的 props
const mapStateToProps = (state) => ({count: state.count
});// 将 action creators 映射到组件的 props
const mapDispatchToProps = {increment,decrement
};// 使用 connect 连接组件和 Redux store
export default connect(mapStateToProps, mapDispatchToProps)(App);

4. 创建 actions.js 文件来定义 action creators：

export const increment = () => ({type: 'INCREMENT'
});export const decrement = () => ({type: 'DECREMENT'
});

5. 在 index.js 中渲染应用并连接 store：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root')
);

在这个例子中，通过 Redux 管理了一个简单的计数器状态，reducer 根据不同的 action 类型来更新状态，React 组件通过 connect 函数从 Redux store 中获取状态和 action creators 来触发状态的更新。

http://www.lryc.cn/news/426104.html

相关文章：

  • 【ocr识别003】flask+paddleocr+bootstrap搭建OCR文本推理WEB服务
  • 从零开始搭建 LVS 高性能集群 (DR模式)
  • Linux环境开发工具【yum与vim】
  • laravel GuzzleHttp Client 无法获取返回的错误信息
  • XMOS 多路音频解码器
  • XSS小游戏（题目+解析）
  • 《Redis核心技术与实战》学习笔记4——AOF日志：宕机了，Redis如何避免数据丢失？
  • NextJs - 服务端/客户端组件之架构多样性设计
  • 使用 Python 进行 PDF 文件加密
  • Spring Boot集成RabbitMQ
  • OLED屏幕制造工艺流程
  • knowLedge-VueCLI项目中环境变量的定义与使用
  • 【C#】 接口 继承
  • Self-Supervised Learning（李宏毅老师系列）
  • 8月16日笔记
  • 苹果Mac电脑——装macOS和Windows双系统的方法
  • 【C++ 面试 - 基础题】每日 3 题（十五）
  • 数学建模学习笔记
  • 个人可识别信息(PII) AI 去除 API 数据接口
  • 【Python-办公自动化】1秒提取PPT文本内容形成目录保存至WORD
  • maven介绍与安装
  • 瑞友科技项目经理认证负责人杨文娟受邀为第四届中国项目经理大会演讲嘉宾︱PMO评论
  • Ubuntu基础使用
  • 知识图谱结构的提示
  • （计算机网络）网络层
  • [upload]-[GXYCTF2019]BabyUpload1-笔记
  • 2023卫星视频综述论文Recent Advances in Intelligent Processing of Satellite Video
  • Mysql的Binlog的数据样例
  • 基于VS2022+Qt5+C++的串口助手开发
  • Mysql之视图