React Element, React Component, DOM Element？

Question

有几个关于React基础概念的问题，感觉自己对这些概念还比较模糊，希望有人能帮忙详细解答：

1. 什么是React Element？在什么时候生成？做什么用？

2. 什么是React Component？什么时候调用？什么时候成生它的实例对象？

3. 什么是DOM Element？在什么时候生成？做什么用？和我们常说的DOM是否是同一个？有什么区别？

4. Reconciliation是针对React Element的对比吗？如果是，那是不是意味着React会缓存一份上一个React Element，然后再和新的对比？

5. Reconciliation不同的对比结果，会有什么不同的处理方法？

6. 什么时候会生成Virtual DOM？Virtual DOM Diff是在什么时候进行？

暂时就想到这里。。。

Answer 1

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

// React.createElement(type, config, children); => output new React Element

React Element

是什么：可以理解为在React的VirtualDOM的具体实现
什么时候生成：自己声明的 Hello 组建里面 render 方法所 return的就是一个 React Element
做什么用：定义虚拟DOM

React Component
是什么：可以理解为VirtualTree的具体实现，并有独立的功能，如果说成jquery component的概念你应该不难理解。
什么时候生成：自己声明的 Hello 组建,
做什么用：定义虚拟DOMTree，用来调配内部更新机制。

DOM Element
是什么：就是所说的真实DOM，浏览器处理HTML的数据结构
什么时候生成：1: 源于解析HTML，2:源于用户创建document.createElement
做什么用：描述节点属性和特征。

Reconciliation
这么理解没啥毛病

Reconciliation的实现就是Diff算法，具体参见DOC

Virtual DOM在初始化的时候生成，在状态变更的时候生产，
DIFF是在状态发生变更时触发。

基于这些问题，可以去阅读下源码

Answer 2

https://facebook.github.io/re... Docs Tab里