React 深刻系列１：React 中的元素、組件、實例和節點

文：徐超，《React進階之路》做者

受權發佈，轉載請註明做者及出處

---

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類型的元素使用像h一、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。

既然組件的核心做用是返回React元素，那麼最簡單的組件就是一個返回React元素的函數：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Welcome是一個用函數定義的組件。若是使用類（class）定義組件，返回React元素的工做具體就由組件的render方法承擔，例如：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

其實，使用類定義的組件，render方法是惟一必需的方法，其餘組件的生命週期方法都只不過是爲render服務而已，都不是必需的。

如今來考慮下面這個例子：

class Home extends React.Component {
  render() {
    return (
      <div>
        <Welcome name='老幹部' />
        <p>Anything you like</p>
      </div>
    )
  }
}

Home 組件使用了Welcome組件，返回的React元素爲：

{
  type: 'div',
  props: {
    children: [
      {
        type: 'Welcome',
        props: {
          name: '老幹部'
        }
      },
      {
        type: 'p',
        props: {
          children: 'Anything you like'
        }
      }，
    ]
  }
}

對於這個結構，React 知道如何渲染type = 'div' 和 type = 'p' 的節點，但不知道如何渲染type='Welcome'的節點，當React 發現Welcome 是一個React 組件時（判斷依據是Welcome首字母爲大寫），會根據Welcome組件返回的React 元素決定如何渲染Welcome節點。Welcome組件返回的React 元素爲：

{
  type: 'h1',
  props: {
    children: 'Hello, 老幹部'
  }
}

這個結構中只包含DOM節點，React是知道如何渲染的。若是這個結構中還包含其餘組件節點，React 會重複上面的過程，繼續解析對應組件返回的React 元素，直到返回的React 元素中只包含DOM節點爲止。這樣的遞歸過程，讓React 獲取到頁面的完整DOM結構信息，渲染的工做天然就水到渠成了。

另外，若是仔細思考的話，能夠發現，React 組件的複用，本質上是爲了複用這個組件返回的React 元素，React 元素是React 應用的最基礎組成單位。

實例 (Instance）

這裏的實例特指React組件的實例。React 組件是一個函數或類，實際工做時，發揮做用的是React 組件的實例對象。只有組件實例化後，每個組件實例纔有了本身的props和state，才持有對它的DOM節點和子組件實例的引用。在傳統的面向對象的開發方式中，實例化的工做是由開發者本身手動完成的，但在React中，組件的實例化工做是由React自動完成的，組件實例也是直接由React管理的。換句話說，開發者徹底沒必要關心組件實例的建立、更新和銷燬。

節點 (Node)

在使用PropTypes校驗組件屬性時，有這樣一種類型：

MyComponent.propTypes = { 
  optionalNode: PropTypes.node,
}

PropTypes.node又是什麼類型呢？這代表optionalNode是一個React 節點。React 節點是指能夠被React渲染的數據類型，包括數字、字符串、React 元素，或者是一個包含這些類型數據的數組。例如：

// 數字類型的節點
function MyComponent(props) {
  return 1;
}

// 字符串類型的節點
function MyComponent(props) {
  return 'MyComponent';
}

// React元素類型的節點
function MyComponent(props) {
  return <div>React Element</div>;
}

// 數組類型的節點，數組的元素只能是其餘合法的React節點
function MyComponent(props) {
  const element = <div>React Element</div>;
  const arr = [1, 'MyComponent', element];
  return arr;
}

// 錯誤，不是合法的React節點
function MyComponent(props) {
  const obj = { a : 1}
  return obj;
}

最後總結一下，React 元素和組件的概念最重要，也最容易混淆；React 組件實例的概念你們瞭解便可，幾乎使用不到；React 節點有必定使用場景，但看過本文後應該也就不存在理解問題了。

下篇預告：

React 深刻系列2：組件分類

---

新書推薦《React進階之路》

做者：徐超

畢業於浙江大學，碩士，資深前端工程師，長期就任於能源物聯網公司遠景智能。8年軟件開發經驗，熟悉大前端技術，擁有豐富的Web前端和移動端開發經驗，尤爲對React技術棧和移動Hybrid開發技術有深刻的理解和實踐經驗。