动手实现mini React (三)

别急着划走，相信我，你一定有收获！

我们将从头开始一步一步重写React。遵循真实的React代码中的架构，但没有所有的优化和非必要的功能。

1. createElement
2. render
3. Concurrent Mode
4. Fibers
5. Render 和 Commit 阶段
6. Reconciliation
7. Function Components
8. Hooks

Fibers

通过上一篇文章，我们了解到我们需要把下一个需要处理的单元存储在nextUnitOfWork中，在浏览器空闲的时候再继续处理，我想你心里一定有一个问题，怎么知道下一个处理的单元呢？

我们来看看它的数据结构

const newFiber = {
    type: element.type,  // 存储 string->表签名｜function
    props: element.props, // 存储属性
    parent: fiber, // 指向父节点 源码中为 return 属性
    sibling: fiber, // 指向兄弟节点
    child: fiber, // 指向孩子节点
    dom: null, // 存储 dom 元素
}

接下来，通过举例子的方式来让你加深对fiber的理解

SunsmileReact.render(
  <div>
    <h1>
      <p />
      <a />
    </h1>
    <h2 />
  </div>,
  container
)