首先一句话概括区别：
-
React Element就是一个Virtual DOM
- Virtual DOM 是一个JS对象
React Component其实就是一个Class或者一个function （一个定义）
React Component render方法以及stateless函数的返回值就是一个React Element。
React 组件（Component）
React通过组件的思想，将界面拆分成一个个可以复用的模块，每一个模块就是一个React 组件。一个React 应用由若干组件组合而成，一个复杂组件也可以由若干简单组件组合而成。
我们通常使用Class方式以及function两种方式创建React组件。
Element
在React中Element通常指代的是render函数或者stateless函数返回的Object对象,类似于下面的结构
const element = {
type: String,
props: {
children: [Array,String....],
...
}
}
这个对象通常作为虚拟DOM，用来该React组件的结构和渲染方式，React通过调用ReactDOM.render将这些虚拟DOM在浏览器上渲染成真实DOM。
在React中Element根据其type属性的不同，分成两类： 以原生的DOM元素作为return值的组件，以及以React组件作为return值的组件
React组件返回原生DOM
这类Element的特点是其type属性是原生DOM，举个例子：
//React组件的定义
const Hello = (props) => <div>hello world! <span>{props.name}</span></div>
//该函数被调用，产生的React Element
{
type: 'div',
props: {
children: [
'hello world!',
{
type: 'span',
children: '***'
}],
name: ***
}
}
此类Element由于和真实DOM类似，React会直接根据这个virtual DOM渲染真实DOM。
React组件返回React组件
这类Element的type首字母大写
class Home extends React.Component {
render() {
return (
<div>
<Welcome name='老干部' />
<p>Anything you like</p>
</div>
)
}
}
{
type: 'div',
props: {
children: [
{
type: 'Welcome',
props: {
name: '老干部'
}
},
{
type: 'p',
props: {
children: 'Anything you like'
}
}，
]
}
}
React 知道如何渲染type = 'div' 和 type = 'p' 的节点，但不知道如何渲染type='Welcome'的节点
当React 发现Welcome 是一个React 组件时，会调用该组件的render方法，产生该组件的Element，如果该组件的element中有首字母大写开头的Element的type，继续找下去，直到没有首字母大写的type。
因此，所有的React组件必须首字母大写，原因是生成React Element的时候，type属性会直接使用该组件的实例化时使用的名字（<InstanceName />）如果没大写React将不能判断是否需要继续调用该组件的render方法创建Element
实例
只有使用Class定义的组件，才有实例。
class Home extends React.Component {
render() {
return (
<div>
<Welcome name='老干部' />
<p>Anything you like</p>
</div>
)
}
}
//如果Welcome是使用Class定义的，那么Home中对他的调用就是创建Welcome的实例
//如果Welcome是function定义的，那么Home中就是对这个function的调用
在React中，组件是一种定义，而真正发挥作用的是实例。
- 使用function定义的组件：没有实例
- 不能ref： ref回调函数作用于React组件时，是将组件的实例作为参数传入的，因为function没有实例，因此ref作用于functional component是永远不会被调用的
- 使用class定义的组件：有实例
