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

Posted 2020-10-21 eason-peng

俗话说“万丈高楼平地起”，从这一期开始，我们将使用基于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 元素。