摘要：中的元素組件實(shí)例和節(jié)點(diǎn)，是中關(guān)系密切的個(gè)概念，也是很容易讓初學(xué)者迷惑的個(gè)概念。組件和元素關(guān)系密切，組件最核心的作用是返回元素。只有組件實(shí)例化后，每一個(gè)組件實(shí)例才有了自己的和，才持有對(duì)它的節(jié)點(diǎn)和子組件實(shí)例的引用。

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

React 中的元素、組件、實(shí)例和節(jié)點(diǎn)，是React中關(guān)系密切的4個(gè)概念，也是很容易讓React 初學(xué)者迷惑的4個(gè)概念?，F(xiàn)在，老干部就來詳細(xì)地介紹這4個(gè)概念，以及它們之間的聯(lián)系和區(qū)別，滿足喜歡咬文嚼字、刨根問底的同學(xué)（老干部就是其中一員）的好奇心。

React 元素其實(shí)就是一個(gè)簡單JavaScript對(duì)象，一個(gè)React 元素和界面上的一部分DOM對(duì)應(yīng)，描述了這部分DOM的結(jié)構(gòu)及渲染效果。一般我們通過JSX語法創(chuàng)建React 元素，例如：

const element = 
Hello, world
;

element是一個(gè)React 元素。在編譯環(huán)節(jié)，JSX 語法會(huì)被編譯成對(duì)React.createElement()的調(diào)用，從這個(gè)函數(shù)名上也可以看出，JSX語法返回的是一個(gè)React 元素。上面的例子編譯后的結(jié)果為：

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

最終，element的值是類似下面的一個(gè)簡單JavaScript對(duì)象：

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

React 元素可以分為兩類：DOM類型的元素和組件類型的元素。DOM類型的元素使用像h1、div、p等DOM節(jié)點(diǎn)創(chuàng)建React 元素，前面的例子就是一個(gè)DOM類型的元素；組件類型的元素使用React 組件創(chuàng)建React 元素，例如：

const buttonElement = OK;

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

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

對(duì)于DOM類型的元素，因?yàn)楹晚撁娴腄OM節(jié)點(diǎn)直接對(duì)應(yīng)，所以React知道如何進(jìn)行渲染。但是對(duì)于組件類型的元素，如buttonElement，React是無法直接知道應(yīng)該把buttonElement渲染成哪種結(jié)構(gòu)的頁面DOM，這時(shí)就需要組件自身提供React能夠識(shí)別的DOM節(jié)點(diǎn)信息，具體實(shí)現(xiàn)方式在介紹組件時(shí)會(huì)詳細(xì)介紹。

有了React 元素，我們應(yīng)該如何使用它呢？其實(shí)，絕大多數(shù)情況下，我們都不會(huì)直接使用React 元素，React 內(nèi)部會(huì)自動(dòng)根據(jù)React 元素，渲染出最終的頁面DOM。更確切地說，React元素描述的是React虛擬DOM的結(jié)構(gòu)，React會(huì)根據(jù)虛擬DOM渲染出頁面的真實(shí)DOM。

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

React組件和React元素關(guān)系密切，React組件最核心的作用是返回React元素。這里你也許會(huì)有疑問：React元素不應(yīng)該是由React.createElement() 返回的嗎？但React.createElement()的調(diào)用本身也是需要有“人”負(fù)責(zé)的，React組件正是這個(gè)“責(zé)任人”。React組件負(fù)責(zé)調(diào)用React.createElement()，返回React元素，供React內(nèi)部將其渲染成最終的頁面DOM。

既然組件的核心作用是返回React元素，那么最簡單的組件就是一個(gè)返回React元素的函數(shù)：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

Welcome是一個(gè)用函數(shù)定義的組件。如果使用類（class）定義組件，返回React元素的工作具體就由組件的render方法承擔(dān)，例如：

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

其實(shí)，使用類定義的組件，render方法是唯一必需的方法，其他組件的生命周期方法都只不過是為render服務(wù)而已，都不是必需的。

現(xiàn)在來考慮下面這個(gè)例子：

class Home extends React.Component {
  render() {
    return (
      

        
        
Anything you like
      
    )
  }
}

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

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

對(duì)于這個(gè)結(jié)構(gòu)，React 知道如何渲染type = "div" 和 type = "p" 的節(jié)點(diǎn)，但不知道如何渲染type="Welcome"的節(jié)點(diǎn)，當(dāng)React 發(fā)現(xiàn)Welcome 是一個(gè)React 組件時(shí)（判斷依據(jù)是Welcome首字母為大寫），會(huì)根據(jù)Welcome組件返回的React 元素決定如何渲染W(wǎng)elcome節(jié)點(diǎn)。Welcome組件返回的React 元素為：

{
  type: "h1",
  props: {
      children: "Hello, 老干部"
  }
}

這個(gè)結(jié)構(gòu)中只包含DOM節(jié)點(diǎn)，React是知道如何渲染的。如果這個(gè)結(jié)構(gòu)中還包含其他組件節(jié)點(diǎn)，React 會(huì)重復(fù)上面的過程，繼續(xù)解析對(duì)應(yīng)組件返回的React 元素，直到返回的React 元素中只包含DOM節(jié)點(diǎn)為止。這樣的遞歸過程，讓React 獲取到頁面的完整DOM結(jié)構(gòu)信息，渲染的工作自然就水到渠成了。

另外，如果仔細(xì)思考的話，可以發(fā)現(xiàn)，React 組件的復(fù)用，本質(zhì)上是為了復(fù)用這個(gè)組件返回的React 元素，React 元素是React 應(yīng)用的最基礎(chǔ)組成單位。

這里的實(shí)例特指React組件的實(shí)例。React 組件是一個(gè)函數(shù)或類，實(shí)際工作時(shí)，發(fā)揮作用的是React 組件的實(shí)例對(duì)象。只有組件實(shí)例化后，每一個(gè)組件實(shí)例才有了自己的props和state，才持有對(duì)它的DOM節(jié)點(diǎn)和子組件實(shí)例的引用。在傳統(tǒng)的面向?qū)ο蟮拈_發(fā)方式中，實(shí)例化的工作是由開發(fā)者自己手動(dòng)完成的，但在React中，組件的實(shí)例化工作是由React自動(dòng)完成的，組件實(shí)例也是直接由React管理的。換句話說，開發(fā)者完全不必關(guān)心組件實(shí)例的創(chuàng)建、更新和銷毀。

在使用PropTypes校驗(yàn)組件屬性時(shí)，有這樣一種類型：

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

PropTypes.node又是什么類型呢？這表明optionalNode是一個(gè)React 節(jié)點(diǎn)。React 節(jié)點(diǎn)是指可以被React渲染的數(shù)據(jù)類型，包括數(shù)字、字符串、React 元素，或者是一個(gè)包含這些類型數(shù)據(jù)的數(shù)組。例如：

// 數(shù)字類型的節(jié)點(diǎn)
function MyComponent(props) {
  return 1;
}

// 字符串類型的節(jié)點(diǎn)
function MyComponent(props) {
  return "MyComponent";
}

// React元素類型的節(jié)點(diǎn)
function MyComponent(props) {
  return 
React Element
;
}

// 數(shù)組類型的節(jié)點(diǎn)，數(shù)組的元素只能是其他合法的React節(jié)點(diǎn)
function MyComponent(props) {
  const element = 
React Element
;
  const arr = [1, "MyComponent", element];
  return arr;
}

// 錯(cuò)誤，不是合法的React節(jié)點(diǎn)
function MyComponent(props) {
  const obj = { a : 1}
  return obj;
}

最后總結(jié)一下，React 元素和組件的概念最重要，也最容易混淆；React 組件實(shí)例的概念大家了解即可，幾乎使用不到；React 節(jié)點(diǎn)有一定使用場景，但看過本文后應(yīng)該也就不存在理解問題了。

React 深入系列2：組件分類

我的新書《React進(jìn)階之路》已上市，請(qǐng)大家多多支持！
鏈接：京東 當(dāng)當(dāng)