React Component、Element、Instance

首先一句话概括区别：

• 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定义的组件：有实例