文章目录

• useState源码解读 及 手撕 useState 实现
• • useState源码分析
  • • 逻辑图
    • 源码解读
    • • mountState
      • • mountWorkInProgressHook 函数
      • updateState
      • • updateReducer 函数
  • 实现
  • 对比图
  • 实现效果
  • • 只声明一个 hook
    • 重复调用同一个 hook
    • 声明多个不同的 hooks
  • 体验收获

useState源码解读 及 手撕 useState 实现

useState源码分析

逻辑图

源码解读

hooks 保存在 packages/react-reconciler/src/ReactFiberHooks.old.js 文件中

有一个 dispatcher 的数据结构，是个对象，在不同的 dispatcher 中，都同样存在了 useState；

在不同的 dispatcher 中，useState 的实现对应的是不同的方法：

即 useState 在不同的上下文中对应的是不同的函数
所以：react 通过在不同的上下文使用不同的 dispatcher，来区分当前需要使用 hooks 的不同实现

比如：

mountState

首先看 mountState 的实现：

1. 调用 mountWorkInProgressHook 创建hook对象
2. 初始化 memoizedState 和 baseState ，值为 initialState
3. 创建 hook 的 updateQueue
4. 创建 dispatch 方法（其实就是 绑定了当前的 fiber和 queue 的 dispatchAction ）

mountWorkInProgressHook 函数

1. 创建一个 hook 对象
2. 若这是第一个 hook，挂载到 memoizedState
3. 若不是第一个hook的话，就会把他挂载到上一个 hook的 next 指针下，与上一个hook形成一条链表
4. 返回 该hook 对象

updateState

其实，useState 就是一个预置了 reducer 的 useReducer，预置的 reducer 就是 basicStateReducer

updateReducer 函数

总结：首先获取当前 hooks和 当前的 queue，之后就会 根据 baseState 和 拥有优先级 的 update来计算 memoizedState

具体代码在这：

function updateReducer(reducer: (S, A) => S,initialArg: I,init?: I => S,
): [S, Dispatch] {const hook = updateWorkInProgressHook();const queue = hook.queue;invariant(queue !== null,'Should have a queue. This is likely a bug in React. Please file an issue.',);queue.lastRenderedReducer = reducer;const current: Hook = (currentHook: any);// The last rebase update that is NOT part of the base state.let baseQueue = current.baseQueue;// The last pending update that hasn't been processed yet.const pendingQueue = queue.pending;if (pendingQueue !== null) {// We have new updates that haven't been processed yet.// We'll add them to the base queue.if (baseQueue !== null) {// Merge the pending queue and the base queue.const baseFirst = baseQueue.next;const pendingFirst = pendingQueue.next;baseQueue.next = pendingFirst;pendingQueue.next = baseFirst;}if (__DEV__) {if (current.baseQueue !== baseQueue) {// Internal invariant that should never happen, but feasibly could in// the future if we implement resuming, or some form of that.console.error('Internal error: Expected work-in-progress queue to be a clone. ' +'This is a bug in React.',);}}current.baseQueue = baseQueue = pendingQueue;queue.pending = null;}if (baseQueue !== null) {// We have a queue to process.const first = baseQueue.next;let newState = current.baseState;let newBaseState = null;let newBaseQueueFirst = null;let newBaseQueueLast = null;let update = first;do {const updateLane = update.lane;if (!isSubsetOfLanes(renderLanes, updateLane)) {// Priority is insufficient. Skip this update. If this is the first// skipped update, the previous update/state is the new base// update/state.const clone: Update = {lane: updateLane,action: update.action,eagerReducer: update.eagerReducer,eagerState: update.eagerState,next: (null: any),};if (newBaseQueueLast === null) {newBaseQueueFirst = newBaseQueueLast = clone;newBaseState = newState;} else {newBaseQueueLast = newBaseQueueLast.next = clone;}// Update the remaining priority in the queue.// TODO: Don't need to accumulate this. Instead, we can remove// renderLanes from the original lanes.currentlyRenderingFiber.lanes = mergeLanes(currentlyRenderingFiber.lanes,updateLane,);markSkippedUpdateLanes(updateLane);} else {// This update does have sufficient priority.if (newBaseQueueLast !== null) {const clone: Update = {// This update is going to be committed so we never want uncommit// it. Using NoLane works because 0 is a subset of all bitmasks, so// this will never be skipped by the check above.lane: NoLane,action: update.action,eagerReducer: update.eagerReducer,eagerState: update.eagerState,next: (null: any),};newBaseQueueLast = newBaseQueueLast.next = clone;}// Process this update.if (update.eagerReducer === reducer) {// If this update was processed eagerly, and its reducer matches the// current reducer, we can use the eagerly computed state.newState = ((update.eagerState: any): S);} else {const action = update.action;newState = reducer(newState, action);}}update = update.next;} while (update !== null && update !== first);if (newBaseQueueLast === null) {newBaseState = newState;} else {newBaseQueueLast.next = (newBaseQueueFirst: any);}// Mark that the fiber performed work, but only if the new state is// different from the current state.if (!is(newState, hook.memoizedState)) {markWorkInProgressReceivedUpdate();}hook.memoizedState = newState;hook.baseState = newBaseState;hook.baseQueue = newBaseQueueLast;queue.lastRenderedState = newState;}const dispatch: Dispatch = (queue.dispatch: any);return [hook.memoizedState, dispatch];
}