五分钟学习React（六）：元素（Element）和组件（Component）

俗话说“万丈高楼平地起”，从这一期开始，咱们将使用基于Webpack+Babel的React学习React框架中的一些基础概念。在学习React的过程当中常常会把Element、Class和Component这几个基础概念混淆。因此咱们看看这些React的概念究竟是干什么的，有什么做用。

1. 从ReactDOM.render提及

ReactDOM是React封装DOM的一个软件包，提供了DOM的一些特定方法。render方法就是将React element渲染到事先定义的容器中。

// render方法的定义
ReactDOM.render(
  element,
  container,
  [callback]
)

咱们能够把render方法理解为React应用的一个入口，这个方法首先经过判断element中虚拟DOM节点的markup是不是大写仍是小写，从而创建相应的渲染。小写的虚拟DOM节点的makeup，咱们称之为原生DOM元素，常见的如div、span等。而大写markup的虚拟DOM节点，咱们称之为自定义DOM元素。对于原生DOM元素，render方法会直接建立HTML原生的DOM，而对于自定义的DOM元素，render方法会建立组件来定义。

2. Element的做用

因此简单的说，element就是React实现界面内容的最小单元，它表明了虚拟DOM中的一个对象。它描述了组件实例和DOM节点的关系在React中，经过使用React.createElment能够实现虚拟DOM节点。好比咱们定义一个element：

const element = React.createElement(
    'h1',
    {id: 'myElement'},
    'hello there!'
)

固然也能够在元素中嵌套组件，因为这种特性，咱们能够用元素来描述DOM节点树。

class myCompnent extends React.Component{
    render(){
        return (
            <h1>hello there!<h1>
        )
    }
}

const element = React.createElement(
    myCompnent,
    null,
    null
)

3.组件

组件就是一个方法或者一个类，能够接受必定的输入，以后返回一个React 元素。