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

于 2024-08-17 13:17:44 发布
阅读量389 收藏 13
点赞数 10
分类专栏： 大厂进阶 前端深度解析系列 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/franktaoge/article/details/141227482
版权

前言：

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>
            <Product
                product={{ 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 来触发状态的更新。

桃子叔叔
关注
  • 10
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-mobx:react状态管理之mobx
05-02
react状态管理之mobx 将所有需要公共管理的状态纳入容器类。 添加修饰@observable，被观察者。 需要改变状态的组件添加修饰@observer，观察者。 在组件中监听@action。 在任何组件内部都能访问这个容器类，并改变其...
state-decorator:React状态管理库
05-14
useStateDecorator是一个React挂钩，它以一种简单，可测试和确定性的方式管理组件状态。 特征 确定性状态变化 简化异步动作状态更改（加载状态，成功和错误处理程序，并行动作管理，乐观更新...） 易于测试（使用纯...
大厂进阶四：React源码解析之Fiber架构
franktaoge的博客
08-13 894
本文主要内容： 1、React Concurrent 2、React15架构 3、React16架构 4、Fiber架构 5、任务调度循环和fiber构造循环区别
大厂进阶五：React源码解析之Diff算法
franktaoge的博客
08-14 1109
`React Diff` 算法是 `React` 用于比较虚拟 DOM 树之间差异的一种高效算法。其目的是在更新组件时，尽可能高效地找出真实 DOM 中需要更新的`最小部分`，从而减少不必要的 DOM 操作，提高渲染性能。 会将当前组件与该组件上次更新时对应的`Fiber`节点进行比较，将比较的结果生成新的`Fiber`节点
大厂进阶之一：React基础内容jsx、state、props深度解析
franktaoge的博客
08-08 869
React 是一个用于构建用户界面的 JavaScript 库。把用户界面抽象成一个个的组件，通过引入jsx语法，复用组件更容易，同时保证组件结构清晰。
大厂进阶之二：React高级用法HOC、Hooks对比、异步组件
franktaoge的博客
08-10 1132
本文分文三部分： - HOC高阶组件 higher order component - Hooks 16.8版本后新增的钩子API，手写自定义hooks - 异步组件使用lazy和suspense两个api实现组件代码打包分割和异步加载
大厂进阶之三：React高级用法手写react-router及原理解析
franktaoge的博客
08-13 770
一、本文主要内容： 1、react-router基本原理，手写实现一个react-router 2、react-router分类和主要hooks 3、处理路由加载失败情况的方法 4、错误边界组件在路由加载失败时的工作原理
看起来：React React Hooks的状态管理员
02-05
:cocktail_glass: 外观3.0 React Hooks的状态管理器，也许是最简单的。 自动加载状态▨模块▨重新渲染控制中文×安装yarn add flooks# ornpm install flooks例// counter modelconst counter = ( now ) => ( { count...
mini-react:React二进制大解析
03-24
"mini-react:React二进制大解析"这个主题聚焦于对React的深入理解，尤其是它如何被优化和转化为二进制形式，以提高性能和减少资源加载时间。在"mini-react-master"这个压缩包文件中，可能包含了源代码、编译后的代码...
temperjs:React的状态管理，变得简单
05-08
Temper是React的状态管理库，因此您需要安装并运行React才能使用Temper。 引导React应用程序的最简单且推荐的方法是使用Create React App ： npx create-react-app my-app NPX是一个包亚军工具自带的NPM 5.2+及...
浅谈 React组件设计之受控和非受控组件
weixin_47339511的博客
08-13 450
在开发一个React组件时，可以创建一个灵活的组件，能够在受控和非受控两种模式下工作。这样可以在不同的使用场景中提供更大的灵活性。理解受控和非受控组件的区别有助于你在设计和使用 React 组件时做出更好的选择。希望这些示例和解释对你有所帮助！
react-antive 項目報錯 [CXX1429] error when building with cmake using
qq_35374791的博客
08-13 356
因为之前grale 版本不正确,可能编译残留的文件是不可用的，Android的自动化脚本没有考虑清楚这部分内容，所以只能采用手工删除。找到/node_modules/react-native-reanimated/android 目录下的.cxx文件夹 删除。对于一些需要依赖Android原生的项目可能需要同样的操作，更准确的来说原生依赖包含了c++或者c项目，也许要做同样的操作。以react-native-reanimated 为例，他的项目是使用过c++的这里可能就需要这样的操作了！
React 学习——打包后，包体积可视化
qq_40269801的博客
08-16 112
React 打包后，包体积可视化
react创建项目
weixin_52941842的博客
08-16 122
如果安装了node直接可以使用命令npx create-react-app my-app来创建项目( my-app是项目名称)如果没有安装脚手架会提示你先安装脚手架 输入y回车即可，出现下面截图即表示创建成功。建议node版本大于18，直接终端node -v查看node版本。然后进到项目里面执行npm start命令启动即可。使用脚手架创建借助脚手架工具。
（React/Vue+BPMN.js）前端项目——BPMN工作流设计器
警警的博客
08-13 965
如果你需要更复杂的集成，或者现有的解决方案不满足你的需求，你可以考虑自己封装一个 React 组件，将bpmn.js的功能按照你的需求进行封装。
LogicFlow工作流在React和Vue3中的使用
duansamve的博客
08-12 435
LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，方便我们快速在业务系统内满足类流程图的需求。
关于this的那些事
qq_30898861的博客
08-13 915
全局上下文：在全局作用域中，this指向全局对象。对象方法：作为对象方法调用时，this指向该对象。构造函数：使用new关键字调用时，this指向新创建的对象。普通函数：作为普通函数调用时，this指向全局对象。回调函数：作为回调函数调用时，this通常指向全局对象。箭头函数：箭头函数中的this值是从其外围作用域继承的，而不是由调用上下文决定的。希望这些解释和示例有助于您理解this的指向。如果您还有其他疑问或需要进一步的帮助，请随时提问。很好，既然您已经理解了this。
前端react中new Date(create_time * 1000).toLocaleString()转换问题
最新发布
AndrewPerfect的博客
08-16 203
假设是1723518321，这是一个 Unix 时间戳，表示。要将这个时间戳转换为人类可读的日期格式，通常需要将其乘以 1000，以转换为 JavaScript 中的毫秒时间戳。DateDate。
react多级权限路由
qq_47040462的博客
08-13 388
技术栈：react-router-dom、react18、antd、vite-plugin-mock。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值