react 源码解析 14. 手写 hooks
视频解说（高效学习）：进入学习
往期文章：
1. 开篇介绍和面试题
2.react 的设计理念
3.react 源码架构
4. 源码目录构造和调试
5.jsx& 外围 api
6.legacy 和 concurrent 模式入口函数
7.Fiber 架构
8.render 阶段
9.diff 算法
10.commit 阶段
11. 生命周期
12. 状态更新流程
13.hooks 源码
14. 手写 hooks
15.scheduler&Lane
16.concurrent 模式
17.context
18 事件零碎
19. 手写迷你版 react
20. 总结 & 第一章的面试题解答
21.demo
最要害的是要了解 hook 队列和 update 队列的指针指向和 updateQueue 的更新计算，具体见视频解说
import React from "react";
import ReactDOM from "react-dom";
let workInProgressHook;// 当前工作中的 hook
let isMount = true;// 是否时 mount 时
const fiber = {//fiber 节点
memoizedState: null,//hook 链表
stateNode: App//dom
};
const Dispatcher = (() => {//Dispatcher 对象
function mountWorkInProgressHook() {//mount 时调用
const hook = {// 构建 hook
queue: {// 更新队列
pending: null// 未执行的 update 队列
},
memoizedState: null,// 以后 state
next: null// 下一个 hook
};
if (!fiber.memoizedState) {fiber.memoizedState = hook;// 第一个 hook 的话间接赋值给 fiber.memoizedState} else {workInProgressHook.next = hook;// 不是第一个的话就加在上一个 hook 的前面，造成链表}
workInProgressHook = hook;// 记录当前工作的 hook
return workInProgressHook;
}
function updateWorkInProgressHook() {//update 时调用
let curHook = workInProgressHook;
workInProgressHook = workInProgressHook.next;// 下一个 hook
return curHook;
}
function useState(initialState) {
let hook;
if (isMount) {hook = mountWorkInProgressHook();
hook.memoizedState = initialState;// 初始状态
} else {hook = updateWorkInProgressHook();
}
let baseState = hook.memoizedState;// 初始状态
if (hook.queue.pending) {
let firstUpdate = hook.queue.pending.next;// 第一个 update
do {
const action = firstUpdate.action;
baseState = action(baseState);
firstUpdate = firstUpdate.next;// 循环 update 链表
} while (firstUpdate !== hook.queue.pending);// 通过 update 的 action 计算 state
hook.queue.pending = null;// 重置 update 链表
}
hook.memoizedState = baseState;// 赋值新的 state
return [baseState, dispatchAction.bind(null, hook.queue)];//useState 的返回
}
return {useState};
})();
function dispatchAction(queue, action) {// 触发更新
const update = {// 构建 update
action,
next: null
};
if (queue.pending === null) {update.next = update;//update 的环状链表} else {
update.next = queue.pending.next;// 新的 update 的 next 指向前一个 update
queue.pending.next = update;// 前一个 update 的 next 指向新的 update
}
queue.pending = update;// 更新 queue.pending
isMount = false;// 标记 mount 完结
workInProgressHook = fiber.memoizedState;// 更新 workInProgressHook
schedule();// 调度更新}
function App() {let [count, setCount] = Dispatcher.useState(1);
let [age, setAge] = Dispatcher.useState(10);
return (
<>
<p>Clicked {count} times</p>
<button onClick={() => setCount(() => count + 1)}> Add count</button>
<p>Age is {age}</p>
<button onClick={() => setAge(() => age + 1)}> Add age</button>
</>
);
}
function schedule() {ReactDOM.render(<App />, document.querySelector("#root"));
}
schedule();