React中元素、組件、實(shí)例和節點(diǎn)的示例分析

這篇文章主要介紹React中元素、組件、實(shí)例和節點(diǎn)的示例分析，文中介紹的非常詳細，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

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

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

元素 (Element)

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

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

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

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

最終，element的值是類(lèi)似下面的一個(gè)簡(jiǎn)單JavaScript對象：

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

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

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

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

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

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

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

組件 (Component)

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

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

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

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

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

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

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

現在來(lái)考慮下面這個(gè)例子：

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'
    }
   }，
  ]
 }
}

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

{
 type: 'h2',
 props: {
  children: 'Hello, 老干部'
 }
}

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

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

實(shí)例 (Instance）

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

節點(diǎn) (Node)

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

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

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

// 數字類(lèi)型的節點(diǎn)
function MyComponent(props) {
 return 1;
}

// 字符串類(lèi)型的節點(diǎn)
function MyComponent(props) {
 return 'MyComponent';
}

// React元素類(lèi)型的節點(diǎn)
function MyComponent(props) {
 return <div>React Element</div>;
}

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

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