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