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

前言：

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