摘要：元素和組件實例都不表示真實元素。我希望這篇文章能夠幫助你理清這些術(shù)語參考資料翻譯成支撐實例來自于理解中方法創(chuàng)建組件的聲明式編程和命令式編程的比較對循環(huán)提示增加的研究精髓之一算法

本篇為譯文，原文出處：React Elements vs React Components vs Component Backing Instances

許多人可能聽說過 Facebook 的 React 庫，并在自己的工作或項目中使用它。React 是非常流行的，使開發(fā)用戶界面變得簡單且符合聲明式編程（譯者注：聲明式編程可以參考聲明式編程和命令式編程的比較）。

正如題目所示，React 有幾個概念遍及其文檔，這（幾個概念）可能會讓新React用戶困惑。例如，你在 Glossary、Top-Level API 和 Explanation on Refs 這幾章中檢索 “React Element”、“React Component” 和 “Component Backing Instance”，你會發(fā)現(xiàn)這幾個術(shù)語遍及各處，已經(jīng)是 React 的絕對的核心。

這篇文章不是一篇 React 的教程，更多的是分享我最近學(xué)習(xí) React 而得到的一些（知識）。因此，這篇文章是針對之前已經(jīng)涉獵過 React 的人們，我會假設(shè)你已經(jīng)熟悉 React 一些核心概念和語法。

React 元素這個概念對于 React 來說很重要，但是我堅信一點，因為使用 React 和 JSX 來構(gòu)建用戶界面過于簡單，從而導(dǎo)致可能在最初錯過這個概念。如果你之前用過 React + JSX，毫無疑問的說，在你的 JS 文件中書寫類 HTML 語法更加符合你的習(xí)慣（譯者注：Habit is second nature. 習(xí)慣成自然）。在這種（書寫類HTML語法）假象之下，JSX 語法實際上被編譯成特殊的函數(shù)調(diào)用 — React.createElement()。 猜猜 React.createElement()會產(chǎn)生什么？耶，你猜對了，就是 React 元素。讓我們看一個轉(zhuǎn)換過程的例子：

// 使用 JSX 語法
var helloWorld = 
Hello World!
;

// 然后是 JSX 被編譯成 JavaScript 后的結(jié)果
var helloWorld = React.createElement(
  "div",
  null,
  "Hello World!"
);

// 再是處理成 JavaScript 簡單對象后看起來類似這樣
var helloWorld = {
    key: null,
    props: {
        children: "Hello World!" // more stuff in here
    },
    ref: null,
    type: "div"
    // more stuff in here
};

React 元素是由一些屬性（properties）構(gòu)成的 JavaScript 簡單對象（plain old JavaScript objects，譯者注：關(guān)于更多解釋可以看 Plain Old JavaScript，What is a plainObject in JavaScript?）：

key - 屬性 key 是用來在一組相同類型的 React 元素構(gòu)成的 Array 中標(biāo)識唯一特定 React 元素。你不必提供一個值給它（譯者注：在新版 React 中，如果在循環(huán)一組相同類型的 React 元素時不指定 key，會報一個 warning 錯誤，具體可以參考 React 對循環(huán) warning 提示增加 key 的研究），但是如果你給 key 提供一個值，React 將能夠進行優(yōu)化，使重新渲染過程更高效。

props - 屬性props 恰恰是你所認(rèn)為的: 它是向下傳遞給子組件（child components）的所有 props 和 values 的映射（集合）。

ref - 屬性ref 用來訪問與這個 React 元素相關(guān)聯(lián)的經(jīng)過（瀏覽器或渲染引擎）渲染處理后的底層 DOM 元素。

type - 屬性type 將是兩種格式之一，表示任何有效的 HTML 元素的（名稱）字符串 或 指向 React 組件類的引用。

此時, 了解每個屬性所有細節(jié)并不重要。最大的收獲在于，React 元素僅僅是 JavaScript 簡單對象(plain old JavaScript objects)，用來描述組件的 HTML 應(yīng)是怎樣的結(jié)構(gòu)，這個對象上不包含任何方法（Methods），僅僅只有數(shù)據(jù)。

通過之前 helloWorld React 元素的例子告訴你，helloWorld表示一個子節(jié)點為“Hello World!”文本的 div 標(biāo)簽。即使你創(chuàng)建了一個更復(fù)雜的 JSX 例子，生成的 React 元素仍將是一個 JavaScript 對象，配合其他嵌套 React 元素描述 HTML 將是怎樣的結(jié)構(gòu)。如果這讓你感覺熟悉，是因為這正是虛擬 DOM（Virtual DOM）是什么（的解釋） - 它是 DOM 在特定時間段應(yīng)該是怎樣的結(jié)構(gòu)的描述，通過 React 元素聲明來表示。

不同于 React 元素，你可能對 React 組件更熟悉一些。如果你曾寫過類似下面例子的代碼，那么你之前已經(jīng)創(chuàng)建過 React 組件類了：

// 這是一個 React 組件類
class CustomForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            inputText: "Willson"
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(e) {
        const inputText = e.target.value;
        this.setState({ inputText });
    }

    render() {
        return (
            

                

                    
Hello, {this.state.inputText}
                
                

                    
                
            
        );
    }
}

/*
 * 我假設(shè)你有可用的 React 和 ReactDom，以及  
 * 一個 id 為 "root" 的 HTML 元素
 * ReactDOM.render() 的返回值是組件實例
 */
var componentInstance = ReactDOM.render(, document.getElementById("root"));

上面的例子是用 ES2015 新的 Class 語法寫的，但它幾乎相當(dāng)于使用 React.createClass()。你也許熟悉編寫這些組件類，但重要的是（React文檔中所述的）React 組件指代的是一個 React 組件類的實例。

假如你熟悉 JavaScript 的話，當(dāng)你聽到到“實例化一個類”且智商在線時，你可能會考慮使用new操作符。然而，（在 React 中）從不需要你用 new 操作符創(chuàng)建 React 組件。相反的是，你將使用 ReactDOM.render() 把一個 React 元素渲染成一個特定的 DOM 元素，與此同時，ReactDOM.render() 將返回一個 React 組件實例。

從 ReactDOM.render() 返回的組件實例可以調(diào)用在 React 組件類中定義的方法。反過來想一下會讓你明白，ReactDOM.render() 是 React 為你實例化一個組件的機制。通常, 你不需要訪問組件實例本身, 但我發(fā)現(xiàn)在測試 React 組件時, 將組件實例的引用保存下來（對測試）很有幫助。

與 ReactDOM.render() 有關(guān)的最后一個有趣的點是，React 在 ReactDOM.render() 時對虛擬 DOM 執(zhí)行高效的 diff 算法（譯者注: diff 算法延伸閱讀）。如果你記得（上面說的），React 元素表示虛擬 DOM（元素），這意味著 ReactDOM.render() 接收一個虛擬 DOM（元素），將其渲染成一個真實 DOM 元素，返回（React 元素 type 指定的）組件實例。在底層，如果你將相同的React元素類型（帶有可能不同的 props 值）通過 ReactDOM.render() 渲染成相同的 DOM 元素，React 將執(zhí)行 diff 算法，對 DOM 元素進行僅必須的最小更改。也許令人驚訝的是，它每次返回相同的組件實例 - 除了更新的 prop 和 state 值。

前兩節(jié)探討了 React 元素和 React 組件實例，這兩個概念都是 DOM 之上的抽象層。 現(xiàn)在我們將討論術(shù)語“組件支撐實例”，以及它們自身如何與真實 DOM 元素相關(guān)聯(lián)。

// 組件類
class CustomForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            inputText: "Willson"
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(e) {
        const inputText = e.target.value;
        this.setState({ inputText });
    }

    render() {
        return (
            

                

                    
Hello, {this.state.inputText}
                
                

                    
                
            
        );
    }
}

// 組件實例
var componentInstance = ReactDOM.render(, document.getElementById("root"));

// DOM 實例
var domInstance = ReactDOM.findDOMNode(componentInstance);
// 原文作者這里出了個 Bug，多了一個 D 

在前面的實例中，ReactDOM.render() 通過將 React 元素渲染到現(xiàn)有的 DOM 元素中來生成一個組件實例。正如我們已經(jīng)知道的，組件實例不是真實 DOM 節(jié)點。然而，訪問與組件實例關(guān)聯(lián)的底層 DOM 節(jié)點實際上很簡單 - 我們使用 ReactDOM.findDOMNode()，并將組件實例作為其參數(shù)傳遞。那么這與“組件支撐實例”術(shù)語有什么關(guān)系呢？讓我們一臉懵逼的是，React 在其文檔的各處將引用的真實 DOM 節(jié)點稱之為組件支撐實例。

這3個術(shù)語“React 元素”，“React 組件”和“組件支撐實例”是密切相關(guān)的。 由于 JSX 語法被轉(zhuǎn)譯為 React.createElement()調(diào)用（譯者注：理解轉(zhuǎn)譯這個概念可以參考 Compiling Vs Transpiling），最終返回我們稱之為“React 元素”的 JavaScript 簡單對象（plain old JavaScript objects），你可以將 React元素視為基礎(chǔ)構(gòu)建單元。React 組件實例表示下一個抽象層 - ReactDOM.render() 接收一個 React 元素、引用一個真實 DOM 節(jié)點、返回一個 React 組件實例。該實例可以訪問組件類中定義的方法，但是在單元測試之外很少用到這一點。React 元素和 React 組件實例都不表示真實 DOM 元素。渲染組件實例產(chǎn)生的 DOM 元素被稱為組件支撐實例，訪問它的主要方式是使用ReactDOM.findDOMNode()。

我希望這篇文章能夠幫助你理清這些術(shù)語！

[參考資料]

Backing Instances 翻譯成 支撐實例 來自于 理解React中es6方法創(chuàng)建組件的this

聲明式編程和命令式編程的比較

React 對循環(huán) warning 提示增加 key 的研究

react精髓之一---diff算法

Compiling Vs Transpiling