五分鍾學習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 元素。