使用App函数模拟根组件

 function App() {const [num, updateNum] = useState(0);console.log(`${isMount ? "mount" : "update"} num: `, num);button.textContent = num;return {click() {updateNum((num) => num + 1);updateNum((num) => num + 1);},};}

使用app().click模拟点击事件。

全局变量

      let workInProgressHook; //指向当前的hooks对象let isMount = true;  //判断当前是mount还是update。

App对应的fiber

 // 状态保存在函数组件的fiber上// App组件对应的fiber对象const fiber = {// 保存该FunctionComponent对应的Hooks链表memoizedState: null,// 指向App函数stateNode: App,};

useState函数

每个hooks会创建一个hooks对象，然后存放在fiber的memoizedState上形成链表。workInProgressHook就指向当前的hooks对象。

function useState(initialState) {//每个hook对应一个hooks对象let hook;if (isMount) {// ...mount时需要生成hook对象hook = {queue: {pending: null,},memoizedState: initialState, //当前hooks对应的状态next: null, //指向下一个hooks对象};//判断fiber上的链表if (!fiber.memoizedState) {fiber.memoizedState = hook;} else {workInProgressHook.next = hook; //连接到fiber的hooks链表上}workInProgressHook = hook; //workInProgressHook指向最新的hook对象} else {// update的时候，从workInProgressHook中取出该useState对应的hookhook = workInProgressHook;// 指针往下移动workInProgressHook = workInProgressHook.next;}let baseState = hook.memoizedState;let newState = baseState;if (hook.queue.pending) {// ...根据queue.pending中保存的update更新state// 获取第一个update对象。pending存放着update对象的环状链表，指向的永远是最后一个updatelet firstUpdate = hook.queue.pending.next;do {//执行update actionconst action = firstUpdate.action; // 假设所有的setState(()=>{})都传递了一个函数newState = action(baseState); //每次传入的baseState都是老值firstUpdate = firstUpdate.next;//最后一个update执行完毕后跳出循环。} while (firstUpdate !== hook.queue.pending.next);// 清空queue.pendinghook.queue.pending = null;// 将更新后的state重新赋值hooks对象上。hook.memoizedState = newState || baseState;}// dispatchAction的第一个参数就是当前hooks对象的queuereturn [newState, dispatchAction.bind(null, hook.queue)];}

如上，setState是dispatchAction.bind(null, hook.queue)，他的实现是：
每一个任务更新都会创建一个update对象，他与hooks对象可不同，update对象会通过next指针形成链表，存放在hooks对象queue.pending中，表示需要更新的操作。

 // 调用updateNum实际上调用这个,queue就是当前hooks对应的queue。function dispatchAction(queue, action) {// 每一个任务对应一个updateconst update = {// 更新执行的函数action,// 与同一个Hook的其他更新形成链表next: null,};// 环状单向链表操作if (queue.pending === null) {update.next = update;// 连向自己} else {// 形成环状update.next = queue.pending.next;queue.pending.next = update;}// 将更新的任务保存在hooks上的queue，下次组件执行的时候获取然后更改statequeue.pending = update; //永远指向最新的update// 模拟React开始调度更新schedule();}

最后每次调用完setState，都会进入schedule调度阶段。

   // 模拟react调度，默认执行一次function schedule() {workInProgressHook = fiber.memoizedState;const app = fiber.stateNode(); //执行App函数isMount = false;return app;}

每次调度都会重新执行App函数，然后App函数就会执行useState。然后取出存放在hooks.queue中需要更新的action，执行完后获取最新的state并且返回。

模拟试试



至此，这就是整个hooks的执行过程。

总结：

每个组件对应着一个fiber节点，每个hook对应一个hooks对象，hooks对象存放在fiiber节点上，而每次执行更新函数，会创建一个update，他通过next指针形成链表，存放在hooks对象上的queue.pending上，是一个环状链表，然后执行调度。调度会重新执行函数组件，然后重新执行useState函数，他会获取存放在hooks对象上的queue上的update链表，然后取出之后执行，获取新的状态state返回。
函数组件的状态存放在hooks对象上的memoizedState上，更新的action存放在hooks对象上queue的pending上，而hooks对象存放在fiber节点上。

与React的区别我们用尽可能少的代码模拟了Hooks的运行，但是相比React Hooks，他还有很多不足。以下是他与React Hooks的区别：React Hooks没有使用isMount变量，而是在不同时机使用不同的dispatcher。换言之，mount时的useState与update时的useState不是同一个函数。React Hooks有中途跳过更新的优化手段。React Hooks有batchedUpdates，当在click中触发三次updateNum，精简React会触发三次更新，而React只会触发一次。React Hooks的update有优先级概念，可以跳过不高优先的update。更多的细节，我们会在本章后续小节讲解。

学习文章出自：https://react.iamkasong.com/hooks/create.html#%E5%9C%A8%E7%BA%BFdemo