react render

reactrender：Reconciler工作的阶段被称为render阶段。因为在该阶段会调用组件的render方法

jsx元素要在页面上渲染出来，首先需要调用React.createElement -> React.render（FiberRootNode）-> 创建更新对象 -> 处理更新队列（任务调度） -> 进入commit阶段 -> 渲染完成

React.createElement

```
//JSX代码
<div id='1'>1</div>

// 转换之后:    
React.createElement("div", {
    id: "1"
}, "1")
```

大家可以在babel进行一个更加细致的转换:https://babeljs.io/

Fiber Reconciler 是从 Stack Reconciler 重构而来，通过遍历的方式实现可中断的递归，所以 performUnitOfWork 的工作可以分为两部分：“递”和“归” --- --- ---“递”和“归”阶段会交错执行直到“归”到 rootFiber

递: beginWork---开始

归：completeWork---结束

“递”阶段:

    从 rootFiber 开始向下深度优先遍历。为遍历到的每个 Fiber节点 调用beginWork方法,
该方法会根据传入的 Fiber节点 创建 子Fiber节点 ，并将这两个 Fiber节点 连接起来,
当遍历到叶子节点（即没有子组件的组件）时就会进入“归”阶段。

“归”阶段

  在“归”阶段会调用completeWork 处理 Fiber节点 。
当某个 Fiber节点 执行完 completeWork ，如果其存在 兄弟Fiber节点 （即 fiber.sibling !== null ）
会进入其兄弟Fiber 的“递”阶段 , 如果不存在 兄弟Fiber , 会进入 父级Fiber 的“归”阶段。