React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。

React 中的元素、組件、實例和節點，是React中關系密切的4個概念，也是很容易讓React 初學者迷惑的4個概念。現在，老干部就來詳細地介紹這4個概念，以及它們之間的聯系和區別，滿足喜歡咬文嚼字、刨根問底的同學（老干部就是其中一員）的好奇心。

元素 (Element)

React 元素其實就是一個簡單JavaScript對象，一個React 元素和界面上的一部分DOM對應，描述了這部分DOM的結構及渲染效果。一般我們通過JSX語法創建React 元素，例如：

const element = <h1 className='greeting'>Hello, world</h1>;

element是一個React 元素。在編譯環節，JSX 語法會被編譯成對React.createElement()的調用，從這個函數名上也可以看出，JSX語法返回的是一個React 元素。上面的例子編譯后的結果為：

const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!');

最終，element的值是類似下面的一個簡單JavaScript對象：

const element = { type: 'h1', props: {  className: 'greeting',  children: 'Hello, world' }}

React 元素可以分為兩類：DOM類型的元素和組件類型的元素。DOM類型的元素使用像h1、div、p等DOM節點創建React 元素，前面的例子就是一個DOM類型的元素；組件類型的元素使用React 組件創建React 元素，例如：

const buttonElement = <Button color='red'>OK</Button>;

buttonElement就是一個組件類型的元素，它的值是：

const buttonElement = { type: 'Button', props: {  color: 'red',  children: 'OK' }}

對于DOM類型的元素，因為和頁面的DOM節點直接對應，所以React知道如何進行渲染。但是對于組件類型的元素，如buttonElement，React是無法直接知道應該把buttonElement渲染成哪種結構的頁面DOM，這時就需要組件自身提供React能夠識別的DOM節點信息，具體實現方式在介紹組件時會詳細介紹。

有了React 元素，我們應該如何使用它呢？其實，絕大多數情況下，我們都不會直接使用React 元素，React 內部會自動根據React 元素，渲染出最終的頁面DOM。更確切地說，React元素描述的是React虛擬DOM的結構，React會根據虛擬DOM渲染出頁面的真實DOM。

組件 (Component)

React 組件，應該是大家最熟悉的React中的概念。React通過組件的思想，將界面拆分成一個個可以復用的模塊，每一個模塊就是一個React 組件。一個React 應用由若干組件組合而成，一個復雜組件也可以由若干簡單組件組合而成。

React組件和React元素關系密切，React組件最核心的作用是返回React元素。這里你也許會有疑問：React元素不應該是由React.createElement() 返回的嗎？但React.createElement()的調用本身也是需要有“人”負責的，React組件正是這個“責任人”。React組件負責調用React.createElement()，返回React元素，供React內部將其渲染成最終的頁面DOM。