7kms/react-illustration-series

ReactElement的构造过程实际上也是reconciler调和过程?

iszhangjin opened this issue · 3 comments

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吧

7kms commented

比如class组件中的render, function组件中最后的return. 虽然语法上被编译成了React.createElement, 但是实质上并没有执行, 内存中不会有相应的ReactElement对象.

在reconciler阶段, 遇到这2类组件的时候, 父级别的reactElement肯定已经完备了, 但是对于子级其实是没有的, 只有在运行时才会动态执行React.createElement.

所以交替创建应该是说得过去的呀.

7kms commented

逐级交替, 这个词用得确实也不准确.
改成以function或class组件为单元, 交替创建, 应该更形象.

嗯嗯,这样理解了,感谢大佬