react文档和源码注释是比较好的。学习react源码就好似读一本技术书，能接触到较多的前沿的概念和实现方式。读源码的明显的优势，就是更加熟练使用react，能根据场景设计react的使用方式。

react开源很多年，通过不同的思想火花碰撞，才逐渐有现在的react。在react源码中还有很多’unstable’开头的api，所以在此只能梳理大概流程和重点部分。此版本是基于16.7.0。

知根知底，才能“战无不胜”。

基础准备

若要理解源码需要对DOM有一定的基础。React Tree 的处理方式和Dom Tree 很类似。假如我们渲染一个页面，格式如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Sample page</title>
  5. </head>
  6. <body>
  7.     <h1>Sample page</h1>
  8.     <p>This is a <a href='demo.html'>simple</a> sample.</p>
  9.     <!-- this is a comment --->
  10. </body>
  11. </html>

htm对应的文档如下：
image.png
图1
图1是我们常说的Node Tree。在Node tree上元素和文本是分开的，例如h1，h1是元素，Sample page 是文本节点，它们是两个Node。我们用 React 修改上面的页面，将h1和p移到一个component中，如下所示：
react概述 - 图2
Node Tree和图1一样，此时的对应 React Tree 有点像这样：
image.png
component就是我们常用的组件，名称可以自定义。React Tree使用fiber处理component、element、text等，fiber有点类似于Node，所以React Tree与Dom Tree非常类似。

划分阶段

react、react-dom、react-reconciler等都是源码的部分。若一点点读源码，即便翻过N遍还是看不懂。在源码中对渲染划分了React Tree Reconciliation、Committing Changes两阶段。React Tree Reconciliation 主要用于生成‘fibers’(16前的virtual dom)；Committing Changes 用于挂载、执行生命周期、更新等；运行一次，一般都要经过这两个阶段，只是在初始和更新上处理方式不同。

React Tree Reconciliation 之前的我们可以视为是设置工作环境，当然环境有变，也会随变化调整。Committing Changes之后的我们可以视为清理工作环境。而 react 官网中说的 reconciliation 包含这两个阶段。

文档从初始挂载开始，然后介绍更新。