源码和注释：

const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;
  const pending = sharedQueue.pending;
  if (pending === null) { // 若链表中没有元素，则创建单向环状链表，next指向它自己
     update.next = update;
   } else {
     // 有元素，现有队列（pending）指向的是链表的尾部update，
     // pending.next就是头部update，新update会放到现有队列的最后并首尾相连
     // 将新队列的尾部（新插入的update）的next指向队列的首部，实现首位相连
     update.next = pending.next; 
    // 现有队列的最后一个元素的next指向新来的update，实现把新update接到现有队列上
     pending.next = update;
   } 
  // 现有队列的指针总是指向最后一个update，可以通过最后一个寻找出整条链表
  sharedQueue.pending = update;

https://github.com/7kms/react-illustration-series/blob/master/docs/main/hook-state.md#:~:text=%E8%B0%83-,%E7%94%A8,-updateWorkInProgressHook%E8%8E%B7%E5%8F%96workInProgressHook

这个地方的state改变应该是 1 => 3 => 2 的一个过程吧？这里只是展示了最后一步的图吗？

【文中也没有提到到底该不该省略，省略与不省略的区别是什么。】
期待更新～

如下两张图所示：

在此处注释说取值是ReactDOMRoot对象，但是在下图的指针关系中，这里的取到的应该是FiberRoot

文档地址如下：
https://github.com/7kms/react-illustration-series/blob/master/docs/main/bootstrap.md

这里说ReactDOM(Blocking)Root对象上暴露有render和unmount方法，但是我在源码上看了下，在Legacy模式下是Blocking实例是没有这两个方法的，只有Blocking和Concurrent模式下才会有这两个方法，不知道我说得对不对。

大佬你好，在下面这篇文章中
https://github.com/7kms/react-illustration-series/blob/main/docs/main/hook-effect.md

从下面这张图里看 hooks 的书写顺序应该是 1 ，2 ，3

而 componentUpdateQueue.lastEffect 指向的应该是最后一个effect

所以这里不是很明白。

写的真好！请问流程图用什么工具画的 @7kms

在 fibertree-create.md 的 “过程图解” 小节中对于 performUnitOfWork 第一次调用(只执行 beginWork ) 的描述如下:

执行前: workInProgress指针指向HostRootFiber.alternate对象, 此时current = workInProgress.alternate指向fiberRoot.current是非空的(初次构造, 只在根节点时, current非空).

在执行前 FiberRoot.current 指向的 HostRootFiber 到底是不是为 null？

有的方法会根据 current === null 来判断是否为初次渲染，但是如果这个值为 null，怎么会有 alternate 属性？

先提前感谢大佬解答

hook-state 一节中 baseQueue拼接后的链表顺序好像有误，和给到的demo中的dispatch顺序不符

我理解应该为1、3、2

具体代码为：

 // 2. 链表拼接: 将 hook.queue.pending 拼接到 current.baseQueue
  const pendingQueue = queue.pending;
  if (pendingQueue !== null) {
    if (baseQueue !== null) {
      const baseFirst = baseQueue.next; // 假设为空 baseQueue.next则指向自己
      const pendingFirst = pendingQueue.next; // pendingQueue 为2 ，pendingQueue.next 则为1
      baseQueue.next = pendingFirst; // baseQueue 指向 1
      pendingQueue.next = baseFirst; // pendingQueue(2) 指向 baseQueue
     // 所以最后是 baseQueue => 1 => 3 => 2( 2指向baseQueue )
    }
    current.baseQueue = baseQueue = pendingQueue;
    queue.pending = null;
  }

点击标题后会定位到最顶部，被header遮住

详情请查看此 issue，现在作者建议是使用 remark-pangu，并没计划合并到 pangu

看着有点像ProcessOn？谢谢

这里好像写错了

【beginWork执行过程: 调用updateHostComponent】这里的逻辑是不是错误的呢？
根据上文的逻辑，这里current!==null，应该对比优先级判断当前fiber节点不需要更新
接着调用bailoutOnAlreadyFinishedWork函数，继续判断子节点是否需要更新
!includesSomeLane(renderLane, workInProgress.childLanes)返回true，子节点不需要更新，返回null
进入completeUnitOfWork函数

文章中提到executionContext执行栈为空的时候，会取消 schedule 调度, 主动刷新回调队列flushSyncCallbackQueue()

那 executionContext 都在什么情况下为空呢？

能否告知一下，这些流程图都是用什么工具绘制的？

这里的 if 条件含义是什么？

最新版react代码，用subtreeFlags是代替firstEffect, nextEffect，这部分不是双链表了吗？

performUnitOfWork第 3 次调用说当前节点fiber.lanes处于渲染优先级范围内，调试了一下发现并不在，发生更新的原因oldProps !== newProps

这个地方关于调度的解释并不明确，源码中是在 legacy或blocking模式下并且执行栈为空才会取消调度，但是这里却解释 legacy 下的任何更新都不会经过调度

这里的不包括，指的是什么？

想问下聚聚为啥把 lockfile 加入 .gitignore，是出于何种考量？

我提了一个 #31 GitHub Pages 构建的 PR。没有 lockfile 的话，无法开启 actions/setup-node 的 cache: 'npm' 选项，构建速度会受一点小小的影响。

当然如果聚聚不想在这个仓库下构建在线文档的话，直接把 #30 #31 同时关掉就行。

该组件存在漏洞，是否需要升级组件以修复改问题。
完整报告：https://www.oscs1024.com/cd/1530221122195529728?sign=7c3f1921&report=1
漏洞详情：https://www.oscs1024.com/hd/MPS-2018-7211?s=m

大佬你好，“运行核心”部分在本仓库是 “reconciler 运作流程” 再到“启动过程”，但是在网站中这两篇文章的顺序倒了过来。

因为我看到处的文章都是在说concurrent模式的时间切片，但是明明就没开启，搞的我很懵逼

Just wanted to know if it's fine to fork and create an English variant for this document. Just want to extend some help to the larger community that might not be able to have access to it. If there is an English variant to it would help as well.

https://github.com/7kms/react-illustration-series/blob/main/docs/main/fibertree-update.md#%E8%BF%87%E7%A8%8B%E5%9B%BE%E8%A7%A3

如题，这个仓库对我帮助很大，请大佬们喝杯咖啡

在手机端，导航等功能点击无效果，无法导航

ps: 之前的框架好好的呀，现在dumi移动端适配有问题

感觉这两个地方的注释是有歧义的。图二应该是相邻的下一个兄弟节点。图一的其他子节指的是父节点的其他子节点？
按理来说每次回溯到父节点，都会从左向右遍历兄弟节点，在有兄弟节点的时候都会 return 出去，然后进行外层的 while 。感觉一般情况下图一的代码好像不会被执行。
大佬能否解答下图一在什么情况下才会使 next !== null

在 17.0.2 中，runWithPriority 查看其实现已经是同步。这部分有点疑惑，不知道 @7kms 是怎么理解？

This looks like an interesting illustration series, But sadly I can't read this language (Chinees ? Japanese ?), Is there an English version of this explanation?

这行 多了个 -

还有请问一下现在有计划加入排版规范吗？比如这种？

https://github.com/7kms/react-illustration-series/blob/v17.0.1/docs/algorithm/dfs.md#react-%E5%BD%93%E4%B8%AD%E7%9A%84%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF

ReactElement不能算是严格的树结构, 为了方便表述, 后文都称之为树.

“在react-reconciler包中, ReactElement的构造过程实际上也是reconciler调和过程. 与fiber树的构造是相互交替, 逐级进行的(在fiber 树构建章节中详细解读, 本节只介绍深度优先遍历的使用场景).”
这一节的描述中说ReactElement的构造是与fiber树的构造相互交替的，但ReactElement是把babel解析jsx得到的js对象通过调用React.createElement生成的。这里应该是先生成全部的ReactElement？再按照深度遍历去生成对应的fiber吧

在React 应用中的高频对象一文中。

对于hook对象的介绍中。并没有对其update和updateQueue对象的属性进行解释说明。是不是可以加上呢？

如题

React 算法之调和算法’ 的 ‘reconcileChildrenArray’部分，对于第二次循环的解释（第二张图下面），我有一个小疑问，

生成的 fiber 节点fiber(E), fiber(C)可以复用. 其中fiber(C)节点发生了位移(打上Placement标记)

1. 其中fiber(E)为什么可以复用？老序列中fiber(E)节点的key是 key=d , 而新节点 key=e，key不一样，作者是笔误了吗？
2. fiber(E)可以复用，但为什么没有位移？老序列中fiber(E)在第5个位置，而新的ReactELement序列中E在第3个位置，明显位置不一样，为什么只有fiber(C)位移了？fiber(E)不应该也位移了吗？

期待作者有空的话 回复一下，非常感谢

这里的 Hook 都包括哪些？