詳細解讀React中的元素、元件、實例和節點

這篇文章主要介紹了淺談React中的元素、元件、實例和節點，現在分享給大家，也為大家做個參考。

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

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

元素(Element)

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

const element = <h1 id="Hello-nbsp-world">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、p、p等DOM節點來建立React 元素，前面的範例就是一個DOM類型的元素；元件類型的元素使用React 元件來建立React 元素，例如：

const buttonElement = <Button color=&#39;red&#39;>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 id="Hello-nbsp-props-name">Hello, {props.name}</h1>;
}

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

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

其實，使用類別定義的元件，render方法是唯一必要的方法，其他元件的生命週期方法都只不過是為render服務而已，都不是必要的。

現在來考慮下面這個例子：

class Home extends React.Component {
 render() {
  return (
   <p>
    <Welcome name=&#39;老干部&#39; />
    <p>Anything you like</p>
   </p>
  )
 }
}

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

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

對於這個結構，React 知道如何渲染type = 'p' 和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 <p>React Element</p>;
}

// 数组类型的节点，数组的元素只能是其他合法的React节点
function MyComponent(props) {
 const element = <p>React Element</p>;
 const arr = [1, &#39;MyComponent&#39;, element];
 return arr;
}

// 错误，不是合法的React节点
function MyComponent(props) {
 const obj = { a : 1}
 return obj;
}

最后总结一下，React 元素和组件的概念最重要，也最容易混淆；React 组件实例的概念大家了解即可，几乎使用不到；React 节点有一定使用场景，但看过本文后应该也就不存在理解问题了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

通过JS中利用FileReader如何实现上传图片前本地预览功能

根据select标签设置默认选中的选项方法该怎么做？

原生JavaScript中如何实现todolist功能

以上是詳細解讀React中的元素、元件、實例和節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！