react-illustration-series
react-illustration-series copied to clipboard
7kms
completeUnitOfWork 中的部分注释有歧义
感觉这两个地方的注释是有歧义的。图二应该是相邻的下一个兄弟节点。图一的其他子节指的是父节点的其他子节点？ 按理来说每次回溯到父节点，都会从左向右遍历兄弟节点，在有兄弟节点的时候都会 return 出去，然后进行外层的 while 。感觉一般情况下图一的代码好像不会被执行。 大佬能否解答下图一在什么情况下才会使 next !== null
看源码，有以下几种情况
SuspenseComponent & DidCapture
https://github.com/facebook/react/blob/e0aa5e205feee53043ce1ae8726fe732866e6ea7/packages/react-reconciler/src/ReactFiberCompleteWork.new.js#L1094
SuspenseListComponent
https://github.com/facebook/react/blob/e0aa5e205feee53043ce1ae8726fe732866e6ea7/packages/react-reconciler/src/ReactFiberCompleteWork.new.js#L1308
https://github.com/facebook/react/blob/e0aa5e205feee53043ce1ae8726fe732866e6ea7/packages/react-reconciler/src/ReactFiberCompleteWork.new.js#L1435
深度优先：先找当前节点下是否有子节点，没有的话则查找当前节点的兄弟节点，再没有则返回父节点进行同样类型的查找。 completeUnitOfWork 阶段会有VDOM 的拼接操作，这个拼接会导致当前节点存在新增节点的情况，则需要去查找该新增节点上的一些信息，比如是否还有更深的子节点以及新增节点的属性等。
completeUnitOfWork 阶段会有VDOM 的拼接操作
这个能帮忙具体定位一下代码吗？我在 completeUnitOfWork 里面没有找到。谢谢
这里实际上是在讨论completeWork函数的返回值, 绝大多数情况都返回的null(即不会派生出子节点). 只有一种特殊情况涉及到SuspenseComponent 和 SuspenseListComponent组件, 它们是有返回值的. @creamidea 已经贴上了对应的源码.
在v17.0.2中, 这些组件虽然在源码中体现了, 实际上是用不上的. 这个是v18的feature, 需要安装v18对应的版本才能体验.
SuspenseComponent有下级fallback组件需要渲染, 所以completeWork函数会返回自身, 最后退出completeUnitOfWork, 再次进入beginWork阶段去生成fallback组件对应的fiber节点
completeUnitOfWork 阶段会有VDOM 的拼接操作
这个能帮忙具体定位一下代码吗？我在 completeUnitOfWork 里面没有找到。谢谢
@jacty 指的vdom拼接是否就是指代的SuspenseComponent 的fallback这种形式?