completeUnitOfWork 中的部分注释有歧义

Question

completeUnitOfWork 中的部分注释有歧义

DaphnisLi opened this issue 2 years ago · 7 comments

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

Answer 1 · 2022-03-10T04:50:20.000Z

看源码，有以下几种情况

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

Answer 2 · 2022-03-10T06:56:55.000Z

谢谢大佬解答

Answer 3 · 2022-03-10T18:26:35.000Z

深度优先：先找当前节点下是否有子节点，没有的话则查找当前节点的兄弟节点，再没有则返回父节点进行同样类型的查找。
completeUnitOfWork 阶段会有VDOM 的拼接操作，这个拼接会导致当前节点存在新增节点的情况，则需要去查找该新增节点上的一些信息，比如是否还有更深的子节点以及新增节点的属性等。

Answer 4 · 2022-03-11T00:54:36.000Z

completeUnitOfWork 阶段会有VDOM 的拼接操作

这个能帮忙具体定位一下代码吗？我在 completeUnitOfWork 里面没有找到。谢谢

Answer 5 · 2022-03-11T02:46:08.000Z

这里实际上是在讨论completeWork函数的返回值, 绝大多数情况都返回的null(即不会派生出子节点). 只有一种特殊情况涉及到SuspenseComponent 和 SuspenseListComponent组件, 它们是有返回值的. @creamidea 已经贴上了对应的源码.
在v17.0.2中, 这些组件虽然在源码中体现了, 实际上是用不上的. 这个是v18的feature, 需要安装v18对应的版本才能体验.

SuspenseComponent有下级fallback组件需要渲染, 所以completeWork函数会返回自身, 最后退出completeUnitOfWork, 再次进入beginWork阶段去生成fallback组件对应的fiber节点

Answer 6 · 2022-03-11T02:47:19.000Z

completeUnitOfWork 阶段会有VDOM 的拼接操作

这个能帮忙具体定位一下代码吗？我在 completeUnitOfWork 里面没有找到。谢谢

@jacty 指的vdom拼接是否就是指代的SuspenseComponent 的fallback这种形式?

Answer 7 · 2022-03-11T06:47:52.000Z

确实，通过源码看出来，目前 Suspense 会出现新增 fiber 节点的操作。感谢大佬们 🙏