从代码的树结构的角度探索源码是如何转换为真实DOM树的
从源码组件树到浏览器处理的真实DOM树都有哪些转换过程呢需要注意的是，这里说的源码组件树并不是一颗真正的树，指的是代码组织结构是一颗树，统称为树便于记忆理解
如下图所示，有四种树结构的流转
首先，源码组件树就是开发者手写的源码，表现形式就是tsx或是jsx
先编译，后运行。在编译阶段，tsx会被编译工具如Babel处理成函数的调用的形式，在运行阶段会执行该函数。对于React的早期版本，Babel使用的函数是名为createElement的函数，17版本以后使用的则是名为jsx的函数，相同的是，它们都是返回一种叫做ReacElement数据结构的对象，这个ReactElement就是tsx的第二种表现形式，从根节点一般是App对应的ReactElement对象开始，通过访问children属性，可以放到叶子节点对象，所以可以看作是一颗ReactElement树。
而第三种表现形式就是Fiber双缓存树了，ReactElement对象经过处理得到Fiber对象并随后立即将该Fiber对象引用到Fiber树上，进行实时构建Fiber树
第四种表现形式就是真实DOM树了
