掘金博客：React函数组件副作用Hook - useContext和useReducer
🚀 引言：告别状态管理的"手忙脚乱"
各位掘友们，大家好！在React的世界里，状态管理就像是给你的应用"穿针引线"，如果线团乱成一锅粥，那可真是让人头大。尤其是在函数组件大行其道的今天，如何优雅地管理组件状态，成了我们前端er的"必修课"。
今天，咱们就来聊聊React Hooks家族里的两位"幕后英雄"------useContext和useReducer。它们就像是React给我们准备的"武林秘籍"，能帮助我们告别传统状态管理的"手忙脚乱"，让代码变得更加清晰、高效。别担心，咱们会用最通俗易懂、最风趣幽默的方式，结合生活中的小例子，一起揭开它们的神秘面纱！准备好了吗？Let's go！
✨ 第一章：useContext - 全局数据共享的"秘密通道"
💡 1.1 useContext 是什么？
想象一下，你家里有个特别重要的"家庭共享账本"，上面记录着所有家庭成员的收支情况。每个人都可以查看，但只有特定的人才能修改。在React的世界里，Context就扮演着这个"家庭共享账本"的角色，它提供了一种在组件树中共享数据的方式，而无需通过层层props手动传递。这就像是给你的数据开辟了一条"秘密通道"，让它们可以直达需要它们的组件，避免了"props drilling"（属性逐层传递）的烦恼。
而useContext，就是你打开这条"秘密通道"的"钥匙"！它是一个React Hook，允许你在函数组件中订阅Context的变化。当Context中的数据更新时，所有订阅了该Context的组件都会自动重新渲染，确保它们获取到最新的数据。是不是很方便？
⚠️ 注意： 尽管useContext非常方便，但它并非万能药。对于非常复杂或频繁更新的全局状态，我们通常还是会选择像Redux、Dva、MobX这样的第三方状态管理库。它们提供了更强大的功能和更完善的生态系统，就像是专业的"家庭理财管家"，能更好地管理你的"家庭共享账本"。useContext更适合那些不那么频繁更新、或者只在组件树的某个局部范围内共享的数据。
🔧 1.2 useContext 怎么用？
useContext 的用法非常简单，就像你从一个公共储物柜里取东西一样。首先，你需要创建一个Context对象，这就像是给你的"秘密通道"命名：
jsx
// 创建一个Context对象，并设置默认值。这个默认值只有在组件没有匹配到Provider时才会生效。
const UserContext = React.createContext({ age: '18', name: 'Jerry' });接下来，你需要一个Provider来提供数据。Provider就像是那个公共储物柜的管理员，它负责把数据"放"进储物柜里，让所有需要的人都能拿到。任何被UserContext.Provider包裹的组件，以及它们的子组件，都可以访问到value属性中传递的数据。
jsx
function App() {
const currentUser = { age: '25', name: 'Alice' };
return (
// 使用Provider包裹需要访问Context的组件树
// value属性就是你要共享的数据
<UserContext.Provider value={currentUser}>
<UserProfile />
</UserContext.Provider>
);
}最后，在你的函数组件中，你就可以使用useContext这个"钥匙"来获取数据了：
jsx
import React, { useContext } from 'react';
function UserProfile() {
// 使用useContext Hook，传入你创建的Context对象
// 它会返回离当前组件最近的那个Provider提供的value
const user = useContext(UserContext);
return (
<div>
<h2>用户信息</h2>
<p>姓名: {user.name}</p>
<p>年龄: {user.age}</p>
</div>
);
}🔄 渲染机制： 当UserContext.Provider的value属性发生变化时，所有使用了useContext(UserContext)的组件都会自动重新渲染，以确保它们显示的是最新的数据。这就像是家庭共享账本更新了，所有查看账本的家庭成员都会立刻看到最新的收支情况。
🖼️ useContext 数据流向示意图
🏡 1.3 生活中的例子：共享家庭WiFi密码
想象一下，你家新安装了WiFi，密码是"iloveReactHooks"。如果你家有十口人，每个人都要上网，你是不是得挨个告诉他们密码？如果密码换了，你又得挨个通知一遍，是不是很麻烦？
有了useContext，这个问题就迎刃而解了！你可以把WiFi密码放在一个WiFiContext里，然后用WiFiContext.Provider把你家所有房间（组件）都包裹起来。这样，每个房间里的设备（子组件）只要用useContext(WiFiContext)就能轻松获取到WiFi密码，无需你挨个去告诉。密码换了？没关系，你只需要在Provider那里更新一下value，所有设备都会自动获取到新密码，是不是很方便？这就像是你在家里贴了一张大大的WiFi密码告示牌，所有人都一目了然！
💻 1.4 代码示例：共享用户年龄和姓名
让我们用代码来模拟一下这个"家庭共享账本"的场景，共享用户的年龄和姓名：
jsx
import React, { useContext } from 'react';
// 1. 创建一个Context对象，并设置默认值
// 这里的默认值会在没有Provider提供数据时生效
const UserInfoContext = React.createContext({ age: '未知', name: '匿名用户' });
// 这是一个子组件，它需要访问用户信息
function AgeComp() {
// 2. 使用useContext Hook来获取UserInfoContext中的数据
// ctx 将会是 { age: '...', name: '...' } 这样的对象
const ctx = useContext(UserInfoContext);
return (
<div>
<p>年龄: {ctx.age}岁</p>
</div>
);
}
// 另一个子组件，也需要访问用户信息
function NameComp() {
const ctx = useContext(UserInfoContext);
return (
<div>
<p>姓名: {ctx.name}</p>
</div>
);
}
// 父组件，负责提供用户信息
function UserProfileApp() {
// 假设这是从后端获取到的用户数据
const currentUser = { age: '28', name: '小明' };
return (
// 3. 使用UserInfoContext.Provider包裹需要共享数据的组件树
// 通过value属性传递实际的用户数据
<UserInfoContext.Provider value={currentUser}>
<h1>个人信息展示</h1>
<AgeComp />
<NameComp />
</UserInfoContext.Provider>
);
}
export default UserProfileApp;执行结果：
通过这个例子，我们可以看到，AgeComp和NameComp这两个子组件，并没有通过props从父组件UserProfileApp那里接收数据，而是直接通过useContext(UserInfoContext)拿到了共享的用户信息。是不是很酷？
🔄 第二章：useReducer - 复杂状态管理的"瑞士军刀"
💡 2.1 useReducer 是什么？
如果说useState是React Hooks家族里的"小清新"，简单直接，那useReducer就是那位"深藏不露"的"武林高手"。它其实是useState的"增强版"，专门用来处理那些状态逻辑比较复杂、状态之间存在关联性、或者下一个状态依赖于上一个状态的场景。当你的useState开始变得臃肿，或者你需要管理多个相互关联的状态时，useReducer就能像一把"瑞士军刀"一样，帮你把复杂的状态逻辑整理得井井有条。
useReducer的设计灵感来源于Redux，它引入了reducer（纯函数）、dispatch（派发动作）和action（动作）的概念。这套模式能让你以一种可预测的方式管理状态，就像你给一个机器人下达指令一样：你告诉它要做什么（action），它根据指令（reducer）去改变自己的状态，然后告诉你改变后的结果（state）。
🔧 2.2 useReducer 怎么用？
useReducer 的用法，就像是你在指挥一个"智能管家"来处理家务。你需要告诉它"规则"（reducer），给它"初始状态"（initialState），然后通过"下达指令"（dispatch）来让它"行动"（action），最终它会给你一个"新的家务状态"（newState）。
参数解析：
-
reducer函数： 这是一个纯函数，它接收当前的state和一个action作为参数，然后根据action的类型来计算并返回一个新的state。它就像是你的"智能管家"的"行为准则手册"，告诉它在收到不同指令时应该如何操作。javascript(state, action) => newState -
initialState： 这是你的状态的初始值，就像你家刚开始时的样子。 -
init函数（可选）： 这是一个用于惰性初始化state的函数。如果你需要根据一些复杂的逻辑来计算初始状态，或者初始状态的计算成本很高，可以使用它。它就像是你的"智能管家"在第一次上岗前，需要先进行一次复杂的"环境评估"才能确定初始工作状态。
返回值解析：
useReducer Hook 会返回一个包含两个元素的数组：
-
state： 当前的状态值，也就是你的"智能管家"处理完家务后的最新状态。 -
dispatch函数： 这是一个用于派发action的函数。当你想要改变状态时，你就调用dispatch函数，并传入一个action对象。它就像是你给"智能管家"下达指令的"遥控器"。
工作流程：
- 你调用
dispatch函数，并传入一个action对象（例如：dispatch({ type: 'increment' })）。 - React 会将当前的
state和你派发的action一起传递给你的reducer函数。 reducer函数根据action的类型，计算出新的state并返回。- React 接收到新的
state后，会重新渲染组件，更新UI。
这整个过程，就像是一个闭环：你发出指令 -> 管家执行指令 -> 状态改变 -> 你看到新的状态。是不是很清晰？
🖼️ useReducer 工作原理示意图
🏡 2.3 生活中的例子：银行账户交易记录
想象一下你的银行账户，它有余额（state），你平时会进行存款、取款、转账等操作。这些操作，就是我们所说的"动作"（action）。每次你进行操作，银行系统都会根据你的操作类型（存款、取款等）和金额，来更新你的账户余额。这个更新余额的逻辑，就是reducer函数。
比如，你向银行系统发送一个"存款"的action，并附带金额。银行系统（reducer）收到这个action后，就会把你的账户余额加上这笔金额，然后更新你的账户状态。如果你发送一个"取款"的action，它就会减去相应的金额。整个过程，你的账户余额（state）都是通过明确的"动作"（action）和"规则"（reducer）来改变的，非常清晰和可控。
useReducer在处理这种"账户交易记录"式的复杂状态时，就显得非常得心应手。它能让你清晰地定义每种操作（action）如何影响状态（state），让你的状态管理逻辑一目了然。
💻 2.4 代码示例：计数器实现
我们用一个简单的计数器来演示useReducer的用法。这个计数器可以增加、减少和重置。
jsx
import React, { useReducer } from 'react';
// 1. 定义reducer函数
// reducer接收当前state和action，并返回新的state
function counterReducer(state, action) {
switch (action.type) {
case 'increment':
// 增加计数
return { count: state.count + 1 };
case 'decrement':
// 减少计数
return { count: state.count - 1 };
case 'reset':
// 重置计数到初始值
return { count: action.payload }; // payload可以用来传递额外数据
default:
// 如果action类型未知，抛出错误或者返回当前state
throw new Error();
}
}
// 2. 定义初始状态
const initialCount = { count: 0 };
function Counter() {
// 3. 使用useReducer Hook
// 它返回当前state和一个dispatch函数
const [state, dispatch] = useReducer(counterReducer, initialCount);
return (
<div>
<h2>计数器</h2>
<p>当前计数: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>
增加 (+)
</button>
<button onClick={() => dispatch({ type: 'decrement' })}>
减少 (-)
</button>
<button onClick={() => dispatch({ type: 'reset', payload: 0 })}>
重置
</button>
</div>
);
}
export default Counter;执行结果：
初始状态： 
点击"增加"后： 
点击"重置"后： 
在这个例子中，counterReducer函数是我们的"规则手册"，它根据不同的action.type（increment、decrement、reset）来更新count状态。dispatch函数就是我们给计数器下达指令的"遥控器"，每次点击按钮，我们都通过dispatch发送一个相应的action，然后useReducer就会调用counterReducer来更新状态，并重新渲染组件。
🔗 第三章：useContext 与 useReducer 的"强强联手"
🤝 3.1 为什么需要结合使用？
当你的应用变得越来越复杂，你可能会遇到这样的场景：既需要全局共享数据（useContext的强项），又需要管理复杂的状态逻辑（useReducer的舞台）。这时候，useContext和useReducer这对"黄金搭档"就能发挥出1+1>2的效果。
想象一下，你正在开发一个电商应用。用户的购物车信息（商品列表、总价等）需要全局共享，因为很多组件都需要访问它（比如导航栏的购物车图标、商品详情页的加入购物车按钮、结算页的商品清单）。同时，购物车的增删改查操作，又涉及到复杂的逻辑，比如计算总价、处理库存等。如果只用useState，你可能会写出很多重复的逻辑，或者把状态传递得一团糟。
这时候，你可以用useReducer来管理购物车的复杂状态逻辑，然后通过useContext将购物车状态和dispatch函数（用于触发购物车操作）共享给整个应用。这样，任何组件都可以轻松地获取购物车状态，并派发操作来修改购物车，而无需层层传递props，也无需引入庞大的第三方状态管理库。这就像是把你的"家庭共享账本"升级成了"智能账本"，不仅能共享，还能自动处理复杂的收支计算！
♻️ 3.2 结合React生命周期：副作用的"前世今生"
在React函数组件中，useContext和useReducer本身并不会直接产生"副作用"（Side Effect）。它们更多的是关于状态管理和数据流动的工具。真正的副作用，通常是由useEffect这个Hook来处理的，比如数据请求、订阅事件、DOM操作等。
然而，useContext和useReducer的变化，会间接影响到组件的生命周期行为，尤其是重新渲染。
-
useContext与生命周期： 当useContext所订阅的Context值发生变化时，使用该Context的组件会触发重新渲染。这类似于类组件中shouldComponentUpdate或componentDidUpdate的场景，只不过useContext为你自动处理了订阅和更新的逻辑。你需要注意的是，如果Context的值频繁变化，可能会导致不必要的重新渲染，这时候可以考虑使用React.memo或useCallback等优化手段来避免性能问题。 -
useReducer与生命周期： 当useReducer的dispatch函数被调用，并且reducer返回了一个新的state时，组件会触发重新渲染。这与useState更新状态导致组件重新渲染的机制是一致的。useReducer的优势在于，它将状态更新的逻辑集中在reducer中，使得状态变化可预测，也更容易进行测试和调试。在reducer内部，你应该避免执行副作用，因为reducer必须是纯函数。如果需要执行副作用，比如在状态更新后发送网络请求，你应该在useEffect中监听useReducer返回的state变化来触发。
小结： useContext和useReducer是管理状态和数据流的利器，它们本身是纯粹的。而与生命周期相关的副作用，通常由useEffect来承担。理解它们各自的职责，并合理搭配使用，能让你的React应用更加健壮和高效。
总结：React Hooks，让开发更"丝滑"
通过今天的"武林秘籍"学习，相信大家对useContext和useReducer这两位React Hooks家族的"幕后英雄"有了更深入的了解。它们并非简单的API，而是React团队为我们解决复杂状态管理和数据共享问题而精心设计的工具。
useContext： 就像一条"秘密通道"，让数据在组件树中自由穿梭，告别props drilling的烦恼，特别适合那些不频繁更新的全局数据共享。useReducer： 就像一把"瑞士军刀"，帮你把复杂的状态逻辑整理得井井有条，让状态变化可预测、可追溯，是useState的强大补充。
当它们"强强联手"时，你就能构建出既清晰又高效的React应用，让你的开发体验像丝滑的巧克力一样顺畅！当然，别忘了，真正的副作用管理，还得靠useEffect这位"多面手"。
希望这篇博客能帮助你更好地理解和运用useContext和useReducer，在你的React开发之路上越走越远，写出更多优雅、健壮的代码！如果你有任何疑问或心得，欢迎在评论区留言交流，我们一起进步！