乐趣区

关于react.js:react-hooks源码核心workInProgressHook函数

react hooks 的更新外围,其实是一个链表的钩子。

目前能够确定,useRef 和 useState 相似,每一个 useState/useRef 都能够了解为一个钩子,钩子(指针)存储在 workInProgressHook 中

能够回顾一下 useRef 的源码:react hooks 实质摸索 – useRef 源码详解

初始化 workInProgressHook 代码如下(中文正文为笔者增加的正文,英文正文为源代码里的正文)

function mountWorkInProgressHook() {
  // 新建链表结点
  var hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null
  };
  
  // workInProgressHook 能够了解为链表的指针
  // 个别状况:指针指的不是链表的结尾
  if (workInProgressHook !== null) {
    // 把新的 hook 赋值给以后 workInProgressHook 的 next
    workInProgressHook.next = hook;
    
    // 让以后的指针指向下一个钩子
    workInProgressHook = workInProgressHook.next
  }

  // 非凡状况:指针指的是 null,阐明链表未建设。if (workInProgressHook === null) {
     // 让指针指向 hook  
     workInProgressHook = hook;
     
     // 这里先不去管他,currentlyRenderingFiber$1 应该是优化渲染局部的
     currentlyRenderingFiber$1.memoizedState = workInProgressHook;
  }

  // 返回指针
  return workInProgressHook;
}

总结来说,等于是把链表的 next 指向一个新的 hook,同时返回了这个链表的表尾。
以上就是初始化 useRef/useState 干的事件。

接下来看更新时,useRef/useState 干了什么:
因为代码比拟长,能够先看一个步骤图理解一下步骤拆解

上面看源码(中文正文为笔者增加的正文,英文正文为源代码里的正文):

function updateWorkInProgressHook() {
  // This function is used both for updates and for re-renders triggered by a
  // render phase update. It assumes there is either a current hook we can
  // clone, or a work-in-progress hook from a previous render pass that we can
  // use as a base. When we reach the end of the base list, we must switch to
  // the dispatcher used for mounts.
  var nextCurrentHook;

   // 这里在 workInProgressHook 之外,引入了一个新的概念:currentHook
  // 然而这个概念能够不必管,因为这是 fiber 的概念。咱们本次不须要晓得 fiber 的概念 
  if (currentHook === null) {
    var current = currentlyRenderingFiber$1.alternate;

    if (current !== null) {nextCurrentHook = current.memoizedState;} else {nextCurrentHook = null;}
  } else {nextCurrentHook = currentHook.next;}

  // 来到咱们相熟的 workInProgressHook
  var nextWorkInProgressHook;

  // 以下这块代码,是为了初始化 nextWorkInProgressHook
  // 非凡状况:链表结尾。如果以后的指针指向为空,阐明为结尾。留神这里判断的是 workInProgressHook
  if (workInProgressHook === null) {
    // 为什么这么赋值,也跟 fiber 无关。能够先不论  
    nextWorkInProgressHook = currentlyRenderingFiber$1.memoizedState;
  } else {
    // 如果不是链表结尾,那么会让 nextWorkInProgressHook 等于以后链表指针的 next,很好了解
    nextWorkInProgressHook = workInProgressHook.next;
  }

  // 这个模块是为了让 workInProgressHook 失常地指向下一个链表节点
  // 失常状况:初始化 nextWorkInProgressHook 后,nextWorkInProgressHook 不为空
  if (nextWorkInProgressHook !== null) {
    // 这部分逻辑就是失常将 workInProgressHook 指针指向下一个元素
    // There's already a work-in-progress. Reuse it.
    workInProgressHook = nextWorkInProgressHook;
    
    // nextWorkInProgressHook 在这个办法里不再用到,然而一个全局变量,其余中央可能用到。nextWorkInProgressHook = workInProgressHook.next;
    currentHook = nextCurrentHook;
  } else {
    // 非凡状况:初始化 nextWorkInProgressHook 后,nextWorkInProgressHook 依然为空
    // 可能有两种状况://   1.workInProgressHook 为空(代表链表为空),currentlyRenderingFiber$1.memoizedState 为空
    //   2.workInProgressHook 不为空,以后指针指向了链表的尾部,所以 workInProgressHook.next 为空,导致 nextWorkInProgressHook 为空。// 不论链表为空,还是指向了结尾,形象意义上都是指向了链表结尾。// 这两种状况,最初都执行了 workInProgressHook = newHook;
        
    // 这一块都是解决 fiberNode,能够不论
    // Clone from the current hook.
    if (!(nextCurrentHook !== null)) {
      {throw Error( "Rendered more hooks than during the previous render.");
      }
    }

    currentHook = nextCurrentHook;
    var newHook = {
      memoizedState: currentHook.memoizedState,
      baseState: currentHook.baseState,
      baseQueue: currentHook.baseQueue,
      queue: currentHook.queue,
      next: null
    };

    // 解决链表为空的状况
    // 这里要留神,如果 nextWorkInProgressHook 不为空,那么 workInProgressHook 也肯定不为空。所以这里隐含了一个条件:// workInProgressHook 和 nextWorkInProgressHook 都为空。if (workInProgressHook === null) {
      // 这里稍稍改写下,把间断赋值分成了两局部
      
      // 链表为空,就须要把第一个元素赋值给指针,让链表指针失常
      // This is the first hook in the list.
      workInProgressHook = newHook;
      
      // fiber 相干
      currentlyRenderingFiber$1.memoizedState = workInProgressHook;
    } else {
    // 以后指针指向了链表的尾部的状况
    
      // 这里做了简略的改写
      // Append to the end of the list.
      workInProgressHook.next = newHook;
      
      // 能够看到,workInProgressHook = newHook 是必然执行的。也要留神,这里是在两个 else 里。workInProgressHook = newHook;
    }
  }

  return workInProgressHook;
}
退出移动版