写在专栏开头（叠甲）
-
作者并不是前端技术专家，也只是一名喜欢学习新东西的前端技术小白，想要学习源码只是为了应付急转直下的前端行情和找工作的需要，这篇专栏是作者学习的过程中自己的思考和体会，也有很多参考其他教程的部分，如果存在错误或者问题，欢迎向作者指出，作者保证内容 100% 正确，请不要将本专栏作为参考答案。
-
本专栏的阅读需要你具有一定的 React 基础、 JavaScript 基础和前端工程化的基础，作者并不会讲解很多基础的知识点，例如：babel 是什么，jsx 的语法是什么，需要时请自行查阅相关资料。
-
本专栏很多部分参考了大量其他教程，若有雷同，那是作者抄袭他们的，所以本教程完全开源，你可以当成作者对各类教程进行了整合、总结并加入了自己的理解。
本一节的内容
这个章节主要讲解React 的 useState 和 useReducer 这两个 api，这是我们使用最多的 hook 了，他们允许我们在函数组件中也持有状态 state，然后对这个状态进行操作，这一章我们会从使用和源码两个角度深入讲解这两个 hooks
useState 的定义
useState()是我们最常见的几个 hooks 之一，它运行我们传入一个初始值来初始化一个 state，之后返回给我们这个 state 和改变它的方法 setState：
const [state, setState] = useState(initialstate)
这里我们来看一个面试题：我们使用一个数组来接收 useState 的赋值，这是因为其使用的是 es6 的解构赋值，数组解构时变量的取值由数组元素的位置决定,变量名可以任意命名，这样的设计使得我们可以自定义 useState 的返回值，比如：
const [num, setNum] = useState(0)
useState 的使用
基本用法
对于 useState 的使用相信大部分的 React 使用者都了然于心，这里就不多介绍了，一个很简单的计时器的例子带过：
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1)
}
return (
<>
Count: {
count}
<button onClick={
handleClick}>+</button>
</>
);
}
函数式更新
useState 也提供了函数式的更新，我们可以将之前的数值作为参数传入，得到更新后的结果：
function Counter() {
const [count, setCount] = useState(0);
function handleClickFn() {
setCount((prevCount) => {
return prevCount + 1
})
}
return (
<>
Count: {
count}
<button onClick={
handleClickFn}>+</button>
</>
);
}
两者的差异
这两种更新方法的区别是：函数式更新传入的值是当前的最新值，而前者则不然，因为 setState 是异步的，这是一个例子：
我们连续做三次 setCount 操作，前者只有一次生效，对同一次的渲染来说，count 是一个固定值，无论在哪里使用这个值，都是固定的。setCount(count+1) 的作用仅仅是把要更新的最新数据记录在了 React 内部，然后等待下次的渲染更新。
当使用函数式更新 state 的时候，这种问题就没有了，因为它可以获取之前的 state 值，也就是每次都是最新的值。
稍后我们会结合源码来深入理解这个特性
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
}
// 1
function handleClickFn() {
setCount(count => count + 1);
setCount(count => count + 1);
setCount(count => count + 1);
}
// 3
return (
<>
Count: {
count}
<button onClick={
handleClick}>+</button>
<button onClick={
handleClickFn}>+</button>
</>
);
}
同步获取更新后的值
根据上面是描述，setState 只有在下次的渲染更新才会更新，所以它是更新是异步的，而我们知道，在 class 组件中，我们可以通过回调函数来获取最新的 state 的值，但是在 function 组件中呢？我们可以通过两种方法来实现
- 直接计算出我们需要的值
我们可以直接计算出我们需要的结果，更新这个状态，之后将我们计算出的结果提供给我们需要的函数即可
const handleClick = () => {
const newCount = count + 1;
setCount(newCount);
getList(newCount);
};
- 使用 useEffect 来监听
我们知道 useEffect 这个钩子可以监控一个依赖项的变化，因为我们不确定 state 什么时候发生改变，所以我们可以通过监听它的变化来，直到它发生变化才进行后续的操作
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
getList();
}, [count]);
const handleClick = () => {
setCount(count + 1);
};
}
覆盖对象而不是合并
useState 返回的 setState 和 class 组件的 setState 的区别是对于 object 的操作：
- class 组件中会合并你两次传入的对象
- 但是
useState返回的setState是直接覆盖原来的元素的
产生这个问题的主要原因是，hooks 内部使用了 object.is 对两次的数值进行比较，不清楚的可以查看上一篇的教程，它只会比较两个对象元素引用的地址是不是一致，不一致则直接替换
class App {
state = {
key1: "value1",
ey1: "value1",,
};
handleClick() {
this.setState({
key2: "value3" });
}
// key1: "value1", key2: "value3",
}
function App() {
const [Info, setInfo] = useState({
ey1: "value1", key2: "value2", });
// 手动展开再赋值
setInfo({
...Info, key2: "value3" });
}
useState 的源码
mount 阶段
接下来我们来看 useState 的源码，它的部分逻辑和我们之前在 Lane 这一章中的是一致的，大家阅读起来应该会比较轻松，我们还是先从 mount 开始看，这里我们需要回顾一下一些概念，可以跟着我一行一行来回顾：
- 首先是我们获取传入的初始值，如果是函数的话，我们执行它获取结果作为我们的初始值
- 之后我们将我们的初始化放到 hook 节点的
memoizedState和baseState属性上，这部分在 hook 的原理这章提到了，memoizedState代表上一次处理完成的 state，因为我们的初次挂载，所以它就是初始值，这个属性也是我们返回给用户的 state 属性。而baseState的当前已经处理完的更新产生的 state，他是为了在一连串的更新执行过程中记录中间状态设定的，因为是初次挂载，已经处理完的就是当前的 state。 - 之后我们创建一个更新队列，我们将他们放在 hook 的 queue 属性中，其中
lastRenderedReducer属性绑定我们上一次在setState函数传入的内容，可能是数值或者一个函数；而lastRenderedState属性存放我们上次render后的state - 最后我们使用
dispatchSetState生成一个更新函数，返回给用户，这个函数被绑定在了 hook 更新的 dispatch 属性上，值得注意都是dispatchSetState函数本来需要传入三个参数，在使用 bind 将其中两个参数传入之后，我们只需要提供一个参数即可，而这个新生成的函数就是我们的setState更新函数
function mountState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
const hook = mountWorkInProgressHook();
// 如果传入的初始值是一个函数，直接执行获得结果
if (typeof initialState === 'function') {
initialState = initialState();
}
// 更新 hook 缓存的数据
hook.memoizedState = hook.baseState = initialState;
// 创建一个更新队列
const queue: UpdateQueue<S, BasicStateAction<S>> = {
pending: null, // 依然是环状链表，这个属性指向链表的最后一个节点
interleaved: null,
lanes: NoLanes,
dispatch: null, // setState
lastRenderedReducer: basicStateReducer, // 上次render传入的操作
lastRenderedState: (initialState: any), // 上次render后的state
};
hook.queue = queue;
// 生成更新函数
const dispatch: Dispatch<
BasicStateAction<S>,
> = (queue.dispatch = (dispatchSetState.bind(
null,
currentlyRenderingFiber,
queue,
): any));
return [hook.memoizedState, dispatch];
}
之后我们来看 dispatchSetState 这个函数做了什么：
- 首先它获取了本次更新的优先级 ，
requestUpdateLane我们在 lane 这章着重讲过，不清楚的可以回去查看 - 之后我们将这个更新封装成一个 Update 节点，要注意，这个 Update 节点是为了我们 hooks 服务的，和之前提到的
updateQueue那节的不一样，但是处理方式基本一致，它会被挂载在 hook 的 queue 的 pending 属性上 - 之后判定这个更新是不是在渲染阶段发生，如果是把它拼接到 queue 的 pending 上，并且设定一个标识
- 如果是正常更新，我们还是首先把它拼接到 queue 的 pending 上，如果当前节点没有更新任务，直接计算出新的 state，然后与之前的 state 对比，若没有更新，则直接退出；
- 若有更新，我们调用
scheduleUpdateOnFiber函数，这个函数在 Lane 这章节已经详细讲过了，可以回去看这个函数
总结来说就是，把我们的 setState 的更新内容（数据或者函数）放到了 hook 的queue 的pending 属性中，如果组件之前没有更新事件，直接计算出 state 的新值，值不变则不触发更新，否则新建一个更新事件开始调度
function dispatchSetState<S, A>(fiber: Fiber, queue: UpdateQueue<S, A>, action: A) {
// 获取lane
const lane = requestUpdateLane(fiber);
// 将 action 操作封装成一个 update节点，用于后续构建链表使用
const update: Update<S, A> = {
lane, // 优先级
action, // setState 传入的内容，可能是操作或者数值
hasEagerState: false, // 紧急状态
eagerState: null, // 紧急状态下提前计算出的结果
next: (null: any), // 指向到下一个节点的指针
};
// 在渲染阶段的更新，拼接到 queue.pending 的后面
if (isRenderPhaseUpdate(fiber)) {
enqueueRenderPhaseUpdate(queue, update);
} else {
// 把 update 更新到 queue.pending 指向的环形链表里
enqueueUpdate(fiber, queue, update, lane);
const alternate = fiber.alternate;
// 如果当前节点没有更新任务
if (fiber.lanes === NoLanes && (alternate === null || alternate.lanes === NoLanes)) {
const lastRenderedReducer = queue.lastRenderedReducer; // 上次render后的reducer，在mount时即 basicStateReducer
if (lastRenderedReducer !== null) {
let prevDispatcher;
const currentState: S = (queue.lastRenderedState: any); // 上次render后的state，mount时为传入的initialState
const eagerState = lastRenderedReducer(currentState, action);
update.hasEagerState = true; // 表示该节点的数据已计算过了
update.eagerState = eagerState; // 存储计算出来后的数据
if (is(eagerState, currentState)) {
// 若这次得到的state与上次的一样，则不再重新渲染
return;
}
}
}
// 有更新任务
const eventTime = requestEventTime();
const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
if (root !== null) {
entangleTransitionUpdate(root, queue, lane);
}
}
markUpdateInDevTools(fiber, lane, action);
}
function enqueueRenderPhaseUpdate<S, A>(
queue: UpdateQueue<S, A>,
update: Update<S, A>,
) {
// 标识render阶段的更新产生了
didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
const pending = queue.pending;
if (pending === null) {
update.next = update;
} else {
update.next = pending.next;
pending.next = update;
}
queue.pending = update;
}
function enqueueUpdate<S, A>(
fiber: Fiber,
queue: UpdateQueue<S, A>,
update: Update<S, A>,
lane: Lane,
) {
// 交错更新
if (isInterleavedUpdate(fiber, lane)) {
const interleaved = queue.interleaved;
if (interleaved === null) {
update.next = update;
pushInterleavedQueue(queue);
} else {
update.next = interleaved.next;
interleaved.next = update;
}
queue.interleaved = update;
} else {
const pending = queue.pending;
if (pending === null) {
update.next = update;
} else {
update.next = pending.next;
pending.next = update;
}
queue.pending = update;
}
}
update 阶段
之后我们来看看 update 阶段发生了什么，这里先要提一句，我们在 mount 阶段仅仅是初始化了 hooks，返回一个 setState 函数，而这个函数的作用是将传入的 action 放到 hook 的更新列表中，但是实际上的更新操作是在 update 阶段才会去执行的，这也是我们上面提到的函数式更新和数值更新产生差异的原因，我们具体来说：
我们承接上文，scheduleUpdateOnFiber 函数开始了一个调度，当它执行到了 renderWithHooks 的时候，此时因为以及渲染出了我们的 Fiber，所以会进入更新的钩子，就是 updateState 函数，而它直接调用了 updateReducer 函数，这个其实是 useReducer 这个钩子的方法，我们马上会讲到
function updateState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
return updateReducer(basicStateReducer, (initialState: any));
}
这里我们来看一下 updateReducer 这个函数，它是我们传入 updateReducer 的逻辑，也就是我们 setState 的更新逻辑，如果我们传入一个值，那么我们直接返回这个值，如果我们传入一个函数，我们返回计算后的结果，而这个函数需要传入一个参数，也就是我们函数式更新传入的上一次的渲染值：
function basicStateReducer(state, action) {
return typeof action === 'function' ? action(state) : action;
}
我们直接来看这个函数updateReducer，他的逻辑和我们之前的 fiber 上的 Update 的更新逻辑类似，大家应该很熟悉，我们简单来概括一下：
-
首先获取当前的 pending 队列和上次遗留下来的队列，把他们合并到一起
-
之后遍历队列中所有的 hook 更新，根据当前的优先级判定它能不能执行
-
若符合当前优先级的，则执行该 update 节点的 action，计算出新的 state，它将作为我们的返回值，可以看到，这里我们传入的当前更新前计算出的最新的值，也就说，我们每次传入的值都是到这个更新触发前最新的 state，这样保证上文中的函数式更新可以每次都能正常更新，而如果我们不使用函数式更新，那么我们传入的值即使包含了 state，那这个 state 也不过是我们调用那个时刻的 state ，但是如果它之前有其他的更新就不能得到响应了；若优先级不符合的，则将此节点到最后的所有节点都存储起来，便于下次渲染遍历，并将到此刻计算出的 state 作为下次更新时的基准 state。
**注意：**这个逻辑我们需要注意，对于我们遇到的所有可执行的任务，我们都需要执行其 action，然后更新我们执行它之后的 state；但是如果我们已经遇到一个不可执行的任务了，即使当前任务可以执行，我们也要把可执行任务放到
BaseQueue中，那么在我们遍历了全部的任务之后，我们的BaseQueue中存放的是从第一个不可执行任务之后的全部任务，他们会在下一次渲染的时候执行，这个渲染需要一个baseState，也就是我们初始化的newBaseState这个变量，它的值会在第一次出现不可知性的任务的时候，把执行到目前的 state 保存下来，也就是说，BaseState是和BaseQueue配合使用的， 一次渲染后，BaseState的值和渲染得到的结果不一定是相同的！只有在全部任务执行完成的情况下，他们才可能完全相同 -
遍历完所有可以执行的任务后，得到一个新的 newState，然后判断与之前的 state 是否一样，若不一样，则标记该 fiber 节点需要更新，并返回新的 newState 和 dispatch 方法。
function updateReducer<S, I, A>(
reducer: (S, A) => S,
initialArg: I,
init?: I => S,
): [S, Dispatch<A>] {
const hook = updateWorkInProgressHook();
const queue = hook.queue;
queue.lastRenderedReducer = reducer;
const current: Hook = (currentHook: any);
//上次遗留下来的优先级不够的任务
let baseQueue = current.baseQueue;
// 获取 queue 队列
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;
}
if (baseQueue !== null) {
const first = baseQueue.next;
let newState = current.baseState; // 上次的渲染的结果值，每次循环时都计算得到该值，然后供下次循环时使用
// 新的 BaseState，用于下次渲染的
let newBaseState = null;
// 新的 basequeue
let newBaseQueueFirst = null;
let newBaseQueueLast = null;
let update = first;
do {
const updateLane = update.lane;
if (!isSubsetOfLanes(renderLanes, updateLane)) {
// 优先级不足，跳过此更新，放到暂存执行的队列中
const clone: Update<S, A> = {
lane: updateLane,
action: update.action,
hasEagerState: update.hasEagerState,
eagerState: update.eagerState,
next: (null: any),
};
// 如果第一次出现了不能执行的了，我们要把当前的计算结果保存下来，因为我们会将此节点到最后的所有节点都存储起来，所以此时我们的 newBaseState 就是当前得到的值，这样下次渲染的时候，我们获得的就是这个不能执行的节点前的执行结果
if (newBaseQueueLast === null) {
newBaseQueueFirst = newBaseQueueLast = clone;
newBaseState = newState;
} else {
newBaseQueueLast = newBaseQueueLast.next = clone;
}
// 更新优先级
currentlyRenderingFiber.lanes = mergeLanes(
currentlyRenderingFiber.lanes,
updateLane,
);
// 标识跳过的任务的优先级
markSkippedUpdateLanes(updateLane);
} else {
// 之前的节点有不能执行的，那么后面的节点都要缓存
if (newBaseQueueLast !== null) {
const clone: Update<S, A> = {
// 该update需要执行，所以我们永远不能跳过他，使用NoLane优先级，可以避免上面的判断会跳过该步骤
lane: NoLane,
action: update.action,
hasEagerState: update.hasEagerState,
eagerState: update.eagerState,
next: (null: any),
};
newBaseQueueLast = newBaseQueueLast.next = clone;
}
// 已经执行过了（mount中）
if (update.hasEagerState) {
newState = ((update.eagerState: any): S);
} else {
// 计算出当前位置的新的state，注意，这个 newState 是作为这一步的返回结果的，不一定我们的 newBaseState，所以就算要被缓存的节点，只要能执行就需要处理
const action = update.action;
newState = reducer(newState, action);
}
}
update = update.next;
} while (update !== null && update !== first);
if (newBaseQueueLast === null) {
// 所有的update都执行了，那么没有下一次渲染了，所以下一次需要的 baseState就是计算结果
newBaseState = newState;
} else {
// 有低优先级的update任务，则next指针指向到第1个，形成单向环形链表，
newBaseQueueLast.next = (newBaseQueueFirst: any);
}
// 若newState和之前的state不一样，标记该fiber需要更新
if (!is(newState, hook.memoizedState)) {
markWorkInProgressReceivedUpdate();
}
hook.memoizedState = newState; // 整个update链表执行完，得到的newState，用于本次渲染时使用
hook.baseState = newBaseState; // 下次执行链表时的初始值
hook.baseQueue = newBaseQueueLast; // 新的update链表，可能为空
queue.lastRenderedState = newState; // 将本次的state存储为上次rendered后的值
}
// 交错更新，省略.....
const dispatch: Dispatch<A> = (queue.dispatch: any);
return [hook.memoizedState, dispatch];
}
useReducer 的定义和使用
useReducer 和 useState 类似，但是它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。
const [state, dispatch] = useReducer(reducer, initState，init);
useReducer接收两个参数：
-
第一个参数：reducer函数，它告诉我们根据传入的
state和action怎么样计算返回一个最新的newState -
第二个参数：初始化的hook 传入的 state
-
第三个参数（可选）：用于懒创建state的函数，如果我们使用了第三个参数，那么第二个参数会作为第三个参数的参数传入懒创建函数，第三个参数的返回值是将作为我们的 state
const initFunc = (initialCount) => { if (initialCount !== 0) { initialCount=+0 } return { count: initialCount}; } const [state, dispatch] = useReducer(reducer, initialCount, initFunc); -
返回值为最新的 state 和 dispatch 函数，其用来触发 reducer 函数
在我们初始化的时候，我们的 state 也就绑定在了 reducer 函数中，此时，我们只需要在调用返回的 dispatch 时传入我们的 action，就可以触发对应的操作，下面是一个简单的例子，我们使用 useReducer 编写了一个具有加减功能的计数器：
const initialState = {
count: 0};
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return {
count: state.count + 1};
case 'decrement':
return {
count: state.count - 1};
default:
throw new Error();
}
};
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {
state.count}
<button onClick={
() => dispatch({
type: 'decrement'})}>-</button>
<button onClick={
() => dispatch({
type: 'increment'})}>+</button>
</>
);
}
同样的，如果 useReducer 返回的值和当前的一样，React不会更新组件，因为React内部使用了Object.is 的语法
useReducer 源码
根据上面的描述我们知道了，useReducer 其实就是一个简单的可以自定义更新方法的 useState ，那么他们的源码也应该极为相似，所以这里我们就直接给出源码和注释：
mountReducer方法和mountState的差距仅仅是我们需要通过 第二个第三个参数来初始化我们的 state，最后同样是返回我们的 state 和 dispatch触发器- 而
updateReducer方法已经给出了，只不过我们在updateReducer方法中我们传入了 basicStateReducer ，而此处，我们使用了自定义的reducer函数，所以此处我们需要一个(state, action) => newState的函数作为参数
function mountReducer<S, I, A>(
reducer: (S, A) => S,
initialArg: I,
init?: I => S,
): [S, Dispatch<A>] {
const hook = mountWorkInProgressHook();
let initialState;
// 如果是懒创建的 initState，我们调用函数得到其值，否则直接获取其值
if (init !== undefined) {
initialState = init(initialArg);
} else {
initialState = ((initialArg: any): S);
}
// 初始化 memoizedState 和 baseState
hook.memoizedState = hook.baseState = initialState;
// 初始化更新队列
const queue: UpdateQueue<S, A> = {
pending: null,
interleaved: null,
lanes: NoLanes,
dispatch: null,
lastRenderedReducer: reducer,
lastRenderedState: (initialState: any),
};
hook.queue = queue;
// 创建 dispatch
const dispatch: Dispatch<A> = (queue.dispatch = (dispatchReducerAction.bind(
null,
currentlyRenderingFiber,
queue,
): any));
return [hook.memoizedState, dispatch];
}
拓展&面试题
解读完了源码，我们来结合源码讲几个面试题：
- useState 是异步还是同步
这题相信大家都已经明白了，之前我们在 setState 中也讲过，useState 的更新是跟我们的 Lane 优先级联动了，它每次调用给出的 setState 的时候，并没有立即执行这个更新返回新的值，而是创建一个更新并且保存在 hook 的数据结构中，之后触发更新，只有满足当前 Fiber 优先级的的更新会被执行，所以显然它是异步的，如果你想马上获得更细完毕的 state，我们也给出了解决方案
- 一并多个调用 dispatch 会触发多次更新吗
这题我们也应该很快得出答案，如下的多次触发 dispatch ，他们会生成多个更新任务，显然这些任务的优先级是相同的，那么在处理这些更新的时候，也会在一次渲染中一并处理，所以不会触发多次更新
const handleClick = () => {
setCount(count => count + 1);
setCount(count => count + 1);
};
- 使用 props 作为 useState 的值会动态改变吗
这题也很简单，形如下的赋值，只有在第一次调用初始化的时候使用的 mount 逻辑，此时会把 props.count 的值赋给我们的 hook，此后不论 props.count 如何变化，都只会触发 update 逻辑，那么 props.count 的值就不会产生影响了
const [count, setCount] = useState(props.count);
如果要实现题目要求的效果，我们应该使用 useEffect 和 useState 配合使用
function App(props) {
const [count, setCount] = useState(props.count);
useEffect(() => {
setCount(props.count);
}, [props.count]);
}
总结
最近在忙 OSPP。也是抽空完成了 useReducer 和 useState 两个为赋值相关 hooks 的源码解读，他们的逻辑类似：
- mount 的时候，传入一个初始值（或者函数），然后建立一个更新队列，最后返回一个 dispatch 作为我们的修改 state 的触发器
- dispatch 在我们调用的时候创建了一个更新，放到了我们的更新队列中，之后开始一次更新的调度
- 当调度到更新组件时，会 update 逻辑，这个逻辑会根据当前 fiber 的优先级来判定更新队列中哪些更新可以触发，然后返回这次渲染更新后的新 state，对于暂时不能触发的更新，我们将他们按照逻辑缓存起来
- 触发更新时，useState 使用一个默认的函数来触发更新，可以选择传入一个数值或者使用一个函数接收上一次更新后产生的 state 来触发更新；而 useReducer 则允许我们自定义更新函数的逻辑
那么接下来离预定的 hook 部分还差一个 useEffect，我会尽快完成这个 React hook 最后的讲解，敬请期待！