概述
众所周知useState是基于useReducer来实现状态更新的，在前面我们介绍过useState的原理，所以在这里介绍下useReducer。本文主要从基础使用入手，再进一步从源码来看useReducer实现原理两个方面来介绍useReducer这个Hook。由于本文省略了部分之前提及的代码和流程，为了避免冗余，有兴趣的可以优先浏览这篇文章：【React Hooks原理 - useState】
基础使用
我们都知道useReducer 是通过传入一个 reducer 函数和初始值，返回state和一个更新 dispatcher，通过返回的dispatcher来触发 action 以更新 state，以此来进行状态管理的Hook 。下面我们从代码来看他的使用。
export function useReducer<S, I, A>(
reducer: (S, A) => S,
initialArg: I,
init?: I => S,
): [S, Dispatch<A>]
从定义来看，其接收三个参数和我们上面的描述所对应：
- reducer： 进行状态更新逻辑的函数
- 初始值：可以是任意类型的值，也可以是返回值的函数
- init: 可选，传递初始化函数本身，可以避免组件更新渲染而重新执行初始化函数
这里对第三个参数init函数，进行补充说明:
function createInitialState(username) {
// ...
}
function TodoList({ username }) {
const [state, dispatch] = useReducer(reducer, createInitialState(username));
// ...
上面代码中虽然 createInitialState(username) 的返回值只用于初次渲染，但是在每一次渲染的时候都会被调用。如果它创建了比较大的数组或者执行了昂贵的计算就会浪费性能。所以为了避免重复执行的问题，提供了init参数。
function createInitialState(username) {
// ...
}
function TodoList({ username }) {
const [state, dispatch] = useReducer(reducer, username, createInitialState);
// ...
需要注意的是你传入的参数是 createInitialState 这个 函数自身，而不是执行 createInitialState() 后的返回值。这样传参就可以保证初始化函数不会再次运行。当传入第三个函数时，React会将第二个参username作为createInitialState函数的入参传递，并且只会在初次渲染时执行。
会重复执行的原因是React内部使用Object.is判断值是否改变，而组件每次渲染都会产生一个新的值，所以也可以通过useMemo来缓存createInitialState(username)结果来避免，但React推荐以第三个参数来处理
所以使用reducer进行状态管理的话，需要自己手动写状态更新规则reduer，一下是官网中的一个简单demo：
import { useReducer } from 'react';
function reducer(state, action) {
if (action.type === 'incremented_age') {
return {
age: state.age + 1
};
}
throw Error('Unknown action.');
}
export default function Counter() {
const [state, dispatch] = useReducer(reducer, { age: 42 });
return (
<>
<button onClick={() => {
dispatch({ type: 'incremented_age' })
}}>
Increment age
</button>
<p>Hello! You are {state.age}.</p>
</>
);
}
源码解析
同其他Hooks一样（useContext除外），useReducer也分为mount、update阶段并通过dispatcher根据不同阶段执行不同函数。
export function useReducer<S, I, A>(
reducer: (S, A) => S,
initialArg: I,
init?: I => S,
): [S, Dispatch<A>] {
const dispatcher = resolveDispatcher();
return dispatcher.useReducer(reducer, initialArg, init);
}
下面我们仍然分别介绍useReducer在mount和update阶段分别做了什么。
mount挂载时
相比经过前面几篇文章的学习我们对代码已经相对熟悉了，所以下面会省略部门代码的解释（因为在其他两篇已经解释过，这里不再冗余）。在mountReducer函数中主要做了以下功能（详情可以看代码注释）：
- 创建并挂载当前fiber节点的hook链表
- 处理初始化函数（如果有）
- 保存初始值，用于对比和更新
- 创建当前hook的更新队列（循环链表）
- 绑定dispatcher用于触发更新reducer
- 返回包含
[value, setValue]
function mountReducer<S, I, A>(
reducer: (S, A) => S,
initialArg: I,
init?: (I) => S
): [S, Dispatch<A>] {
// 创建初始hook绑定fiber的memoizedState属性
const hook = mountWorkInProgressHook();
let initialState;
if (init !== undefined) {
// 传递了初始化函数则使用第二个值为入参并执行
initialState = init(initialArg);
} else {
initialState = ((initialArg: any): S);
}
// 缓存初始值，和更新的起始值
hook.memoizedState = hook.baseState = initialState;
// 创建当前hook的更新队列（循环链表），并将reducer、初始值绑定到更新对象update中
const queue: UpdateQueue<S, A> = {
pending: null,
lanes: NoLanes,
dispatch: null,
lastRenderedReducer: reducer,
lastRenderedState: (initialState: any),
};
hook.queue = queue;
// 绑定dispatcher为dispatchReducerAction，当通过set函数更新时，调用该函数
const dispatch: Dispatch<A> = (queue.dispatch = (dispatchReducerAction.bind(
null,
currentlyRenderingFiber,
queue
): any));
// 返回包含当前state和setState的dispatcher数组
return [hook.memoizedState, dispatch];
}
首次挂载时，state就只执行了这个函数完成了Function Component -> FIber -> Hook -> update 之间的连接和初始化
这里说的mount、update指的是组件首次渲染和更新渲染时state的操作，并不是执行
set函数之后更新state操作
update更新时
在更新渲染时，通过dispatcher派发，最终执行updateReducer函数，其中updateWorkInProgressHook使用复用hook进行性能优化，updateReducerImpl进行更新队列的处理以及状态更新
function updateReducer<S, I, A>(
reducer: (S, A) => S,
initialArg: I,
init?: (I) => S
): [S, Dispatch<A>] {
// 复用hook避免重新创建，优先复用workInprogress.nextHook,没有则克隆页面显示的current.nextHook,都没有则抛出异常
const hook = updateWorkInProgressHook();
return updateReducerImpl(hook, ((currentHook: any): Hook), reducer);
}
updateWorkInProgressHook和updateReducerImpl在介绍useState时都详细介绍过，所以这里简单说明了其功能：
updateReducerImpl函数：
/**
*
* hook：指向当前 Fiber 节点正在处理的具体 Hook 实例（即 Hook 链表中的一个节点）。
* current：指向当前 Fiber 节点中对应的 Hook 实例的当前状态（即已渲染到页面上的状态）。
*/
function updateReducerImpl<S, A>(
hook: Hook,
current: Hook,
reducer: (S, A) => S
): [S, Dispatch<A>] {
// 获取当前指向hook的更新队列，以及绑定reducer更新函数
const queue = hook.queue;
queue.lastRenderedReducer = reducer;
let baseQueue = hook.baseQueue;
// 如果有上次渲染未处理的更新队列
const pendingQueue = queue.pending;
if (pendingQueue !== null) {
// 有上次为处理的更新以及本次也有需要处理的更新，则将两个更新队列合并，否则将上次未处理的赋值给更新队列等待本次渲染更新
if (baseQueue !== null) {
const baseFirst = baseQueue.next;
const pendingFirst = pendingQueue.next;
baseQueue.next = pendingFirst;
pendingQueue.next = baseFirst;
}
current.baseQueue = baseQueue = pendingQueue;
queue.pending = null;
}
// 如果本次没有更新队列，则更新memoizedState为baseState
const baseState = hook.baseState;
if (baseQueue === null) {
hook.memoizedState = baseState;
} else {
// 更新队列有状态需要更新
const first = baseQueue.next;
let newState = baseState;
let newBaseState = null;
let newBaseQueueFirst = null;
let newBaseQueueLast: Update<S, A> | null = null;
let update = first;
let didReadFromEntangledAsyncAction = false;
do {
const updateLane = removeLanes(update.lane, OffscreenLane);
const isHiddenUpdate = updateLane !== update.lane;
const shouldSkipUpdate = isHiddenUpdate
? !isSubsetOfLanes(getWorkInProgressRootRenderLanes(), updateLane)
: !isSubsetOfLanes(renderLanes, updateLane);
// 根据优先级判断当前是否需要跳过更新，并保存在newBaseQueueLast中在下次渲染时更新，然后调用markSkippedUpdateLanes跳过本次更新
if (shouldSkipUpdate) {
...
} else {
const revertLane = update.revertLane;
// 根据优先级判断当前是否需要跳过更新，并保存在newBaseQueueLast中在下次渲染时更新
if (!enableAsyncActions || revertLane === NoLane) {
...
} else {
// 将符合本次更新条件的状态保存在update链表中，等待更新
if (isSubsetOfLanes(renderLanes, revertLane)) {
update = update.next;
if (revertLane === peekEntangledActionLane()) {
didReadFromEntangledAsyncAction = true;
}
continue;
} else {
// 不符合的保存在newBaseQueueLast等待下次渲染时候更新
...
}
}
// 开始更新，如果比较紧急的状态更新则直接处理，否则通过reducer处理
const action = update.action;
if (update.hasEagerState) {
// If this update is a state update (not a reducer) and was processed eagerly,
// we can use the eagerly computed state
newState = ((update.eagerState: any): S);
} else {
newState = reducer(newState, action);
}
}
update = update.next;
} while (update !== null && update !== first);
// 遍历本次更新队列之后，判断是否有跳过的更新，如果有则保存在newBaseState中，等待下次渲染时更新
if (newBaseQueueLast === null) {
newBaseState = newState;
} else {
newBaseQueueLast.next = (newBaseQueueFirst: any);
}
// 判断上一次的状态和reducer更新之后的状态是否一致，发生变化则通过markWorkInProgressReceivedUpdate函数给当前fiber打上update标签
if (!is(newState, hook.memoizedState)) {
markWorkInProgressReceivedUpdate();
if (didReadFromEntangledAsyncAction) {
const entangledActionThenable = peekEntangledActionThenable();
if (entangledActionThenable !== null) {
throw entangledActionThenable;
}
}
}
// 将本次新的state保存在memoizedState中
hook.memoizedState = newState;
// 保存下次更新的初始值，如果本次没有跳过更新，该值为更新后通过reducer或者eagerState计算的新值，有跳过的更新则会本次更新前原来的初始值
hook.baseState = newBaseState;
// 将本次跳过的更新保存在baseQueue更新队列中中，下次渲染时更新
hook.baseQueue = newBaseQueueLast;
queue.lastRenderedState = newState;
}
// 没有状态更新时，将当前队列优先级设置为默认
if (baseQueue === null) {
queue.lanes = NoLanes;
}
const dispatch: Dispatch<A> = (queue.dispatch: any);
return [hook.memoizedState, dispatch];
}
- 处理更新队列，并发起调度申请
- 处理跳过的更新，追加到当前更新队列
- 遍历更新队列，根据优先级判断是否跳过优先级低的任务
- 符合当前更新的任务，通过进行状态更新，在set函数如果提前计算则直接使用计算后值，没有则通过reducer计算状态
- 通过Object.is判断值是否变化，进行跳过更新步骤
- 返回计算后的[hook.memoizedState, dispatch]
至此我们将组件在首次渲染和更新渲染中对于state的处理以及梳理了，下面介绍下当发生交互触发set函数进行状态更新的原理。
触发set更新状态
通过mountReducer介绍我们知道暴露的set函数其实就是通过bind绑定dispatchReducerAction的一个dispatcher，所以我们实际执行的是dispatchReducerAction这个函数
function dispatchReducerAction<S, A>(
fiber: Fiber,
queue: UpdateQueue<S, A>,
action: A
): void {
// 获取本次更新优先级
const lane = requestUpdateLane(fiber);
// 创建更新任务
const update: Update<S, A> = {
lane,
revertLane: NoLane,
action,
hasEagerState: false,
eagerState: null,
next: (null: any),
};
// 判断是否是渲染阶段的更新
if (isRenderPhaseUpdate(fiber)) {
// 直接添加到本次渲染队列后面，当渲染完成之后立即执行，即在本次渲染之后就能看到更新结果
enqueueRenderPhaseUpdate(queue, update);
} else {
// 通过事件触发`set`函数进行更新，则将该更新任务添加到更新队列enqueueUpdate中，等待下次渲染更新，并获取当前渲染组件的根fiber节点
const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
if (root !== null) {
// 发起申请调度请求
scheduleUpdateOnFiber(root, fiber, lane);
entangleTransitionUpdate(root, queue, lane);
}
}
}
从代码能得知在dispatchReducerAction中就是创建本身更新任务然后添加到更新队列中，并发起调度申请。具体步骤如下：
- 获取本次更新的优先级
- 创建本次更新任务
- 判断本次更新是否是渲染阶段直接发起的，如果是则直接将更新任务添加到当前更新队列中，当本次渲染完成之后会立即执行，即然本次渲染结束后也能看到更新后的状态。如果是通过事件触发，则通过
enqueueConcurrentHookUpdate函数将更新任务添加到下次更新队列中等下下次渲染更新，然后发起调度申请，等待更新。
enqueueConcurrentHookUpdate函数如下，就是将本次更新任务update添加到下次更新队列中EnqueueUpdate中，并返回当前更新fiber
的root节点，以便发起调度。
export function enqueueConcurrentHookUpdate<S, A>(
fiber: Fiber,
queue: HookQueue<S, A>,
update: HookUpdate<S, A>,
lane: Lane
): FiberRoot | null {
const concurrentQueue: ConcurrentQueue = (queue: any);
const concurrentUpdate: ConcurrentUpdate = (update: any);
enqueueUpdate(fiber, concurrentQueue, concurrentUpdate, lane);
return getRootForUpdatedFiber(fiber);
}
在dispatchReducerAction函数中有个这个判断if (isRenderPhaseUpdate(fiber))用于将决定当前更新任务的执行时机，里面提到了当前是否是渲染阶段进行的更新，可能会有些疑惑，所以在这里举个例，简单说明一下：
function MyComponent() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1); // 在事件处理器中触发的更新
}
if (count > 0) {
setCount(count + 1); // 在渲染阶段中触发的更新
}
return <button onClick={handleClick}>{count}</button>;
}
如上诉代码在组件中直接执行set函数就是在渲染阶段执行，因为每次渲染执行该函数组件时就会调用set函数更新状态，即这种场景下isRenderPhaseUpdate(fiber) === true，在页面渲染完成之后显示的是更新后的值，而要通过点击按钮触发更新的set任务是在下一次渲染完成之后触发更新的。
useReducer和useState的区别
我们都可以useState是基于useReducer来实现状态管理的，主要区别整理了一下几点：
- 使用参数：useState接收一个参数，可以是值或者函数。useReducer接收三个参数
reducer，state, ?:init - useState用于简单数据管理，一般在组件内部顶层定义单个状态，而useReducer用于复杂状态管理，可以将手动更新规则封装在组件外部，可以用于整个项目的状态管理。比如可以通过
useReducer + useContext代替Redux进行应用间状态共享 - useState状态是覆盖式的，所以通过
state.key修改无法响应。而useReducer通常是累加式的return {...oldState, ...newState}
利用useReducer实现useState
先看代码demo：
function useState(initialState) {
return useReducer(basicStateReducer, initialState);
}
// React会自动保存当前的state并作为第一个参数传递给reducer
function basicStateReducer(state, action) {
return typeof action === 'function' ? action(state) : action;
}
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
如上面例子所示的流程如下：
第一次渲染：
- useState(0) 调用 useReducer，basicStateReducer 接受初始状态 0 并返回 [0, dispatch]。
- dispatch 是内部由 useReducer 生成的函数，用于处理状态更新。
调用 setCount：
- 调用 setCount(count + 1) 会触发 dispatch，其中 action 是 count + 1，即 1。
- basicStateReducer 接受当前状态 0 和 action 1，直接返回 1 作为新的状态。
函数式更新：
- 调用 setCount(prevCount => prevCount + 1) 会触发 dispatch，其中 action 是一个函数 prevCount => prevCount + 1。
- basicStateReducer 调用这个函数，并传入当前状态 1，函数返回 2 作为新的状态。
总结
总结一下useReduer(useState也大致一样，毕竟useState也是基于reducer来的)在React核心包中主要就在mount、update阶段进行状态初始化和hook、更新队列的创建挂载，然后会一个触发更新的dispatcher，然后当调用该dispatcher时会创建一个更新任务等待Scheduler调度，当之前该更新任务时会在Reconciler协调中进行新的fiber树构造，然后进入update阶段会计算新值，并根据新旧值对比判断是否要更新。流程可以理解为： mount -> set更新 -> 新fiber构造 -> update渲染更新 当然这个流程比较粗糙，这里只是解释下本文提到过的几个点的执行时机和顺序。
![BUUCTF[堆][unsortbin]](https://img-blog.csdnimg.cn/img_convert/c159a74b133493af75a3582aa8fcc110.png)
