五分钟学习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元素,常见的如divspan等。而大写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 元素。

posted @ 2018-01-22 21:41  EasonPeng  阅读(2539)  评论(0编辑  收藏