React is all about Component? then what is Elements and Instances?

现在我们写React应用，相当部分都是在写JSX。
JSX本身是对JavaScript语法的一个扩展，看起来像是某种模板语言，但其实不是。但正因为形似HTML，描述UI就更直观了，也极大地方便了开发；你想如果我们没有HTML，必须手写一堆的document.createElement()，我想前端们肯定已经崩溃了。

不过如果你一直写JSX，并且从来没脱离过JSX，可能某种程度上会阻碍我们理解React。当我们有一个JSX片段，它实际上是调用React API构建了一个Elements Tree：
`var profile =

{[user.firstName, user.lastName].join(' ')}

;` 借助babel-plugin-transform-react-jsx，上面的JSX将被转译成：

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

那么createElement是在做什么呢？他创建并返回了一个element tree对象。同时我们也知道 react的render方法是返回一个elements tree, 而react的核心就是围绕elements tree做文章。

首先说一下我们为什么要引入elements tree.
因为传统UI模型中，你必须自己负责创建和销毁子组件的实例（child component instances）：
如果你是React的新手，那么之前你可能只接触过组件的类和实例（component classes and instances ）。比如，你可能会
创建一个类来声明Button组件，当app运行时，屏幕上可能会有多个Button的实例，每个都有自己的属性和私有状态。这就是传统面向对象的UI编程，每个组件实例必须保存自己的DOM nodes和子组件实例的引用，并在对的时间创建，更新，销毁它们。代码的行数将会以可能的状态的数量的 平方 增长，而且组件可以直接访问子组件实例将会使解耦变得困难。
那么react的element tree有什么不同呢？
首先我们来看一下element 的定义：
一个元素（element）就是一个纯对象，描述了一个组件实例或DOM node，以及它需要的属性。它仅仅包含这些信息：组件类型，属性（properties），及子元素。
元素不是实例，实际上，它更像是告诉React你需要在屏幕上显示什么的一种方式。它就是一个有2个数据域（field）的不可变描述对象（immutable description object)

reference: https://github.com/creeperyang/blog/issues/30