[译]React 元素 vs React 组件 vs 组件支撑实例

摘要：元素和组件实例都不表示真实元素。我希望这篇文章能够帮助你理清这些术语参考资料翻译成支撑实例来自于理解中方法创建组件的声明式编程和命令式编程的比较对循环提示增加的研究精髓之一算法

本篇为译文，原文出处：React Elements vs React Components vs Component Backing Instances

许多人可能听说过 Facebook 的 React 库，并在自己的工作或项目中使用它。React 是非常流行的，使开发用户界面变得简单且符合声明式编程（译者注：声明式编程可以参考声明式编程和命令式编程的比较）。

正如题目所示，React 有几个概念遍及其文档，这（几个概念）可能会让新React用户困惑。例如，你在 Glossary、Top-Level API 和 Explanation on Refs 这几章中检索 “React Element”、“React Component” 和 “Component Backing Instance”，你会发现这几个术语遍及各处，已经是 React 的绝对的核心。

这篇文章不是一篇 React 的教程，更多的是分享我最近学习 React 而得到的一些（知识）。因此，这篇文章是针对之前已经涉猎过 React 的人们，我会假设你已经熟悉 React 一些核心概念和语法。

React 元素这个概念对于 React 来说很重要，但是我坚信一点，因为使用 React 和 JSX 来构建用户界面过于简单，从而导致可能在最初错过这个概念。如果你之前用过 React + JSX，毫无疑问的说，在你的 JS 文件中书写类 HTML 语法更加符合你的习惯（译者注：Habit is second nature. 习惯成自然）。在这种（书写类HTML语法）假象之下，JSX 语法实际上被编译成特殊的函数调用 — React.createElement()。 猜猜 React.createElement()会产生什么？耶，你猜对了，就是 React 元素。让我们看一个转换过程的例子：

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

// 然后是 JSX 被编译成 JavaScript 后的结果
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）构成的 JavaScript 简单对象（plain old JavaScript objects，译者注：关于更多解释可以看 Plain Old JavaScript，What is a plainObject in JavaScript?）：

key - 属性 key 是用来在一组相同类型的 React 元素构成的 Array 中标识唯一特定 React 元素。你不必提供一个值给它（译者注：在新版 React 中，如果在循环一组相同类型的 React 元素时不指定 key，会报一个 warning 错误，具体可以参考 React 对循环 warning 提示增加 key 的研究），但是如果你给 key 提供一个值，React 将能够进行优化，使重新渲染过程更高效。

props - 属性props 恰恰是你所认为的: 它是向下传递给子组件（child components）的所有 props 和 values 的映射（集合）。

ref - 属性ref 用来访问与这个 React 元素相关联的经过（浏览器或渲染引擎）渲染处理后的底层 DOM 元素。

type - 属性type 将是两种格式之一，表示任何有效的 HTML 元素的（名称）字符串 或 指向 React 组件类的引用。

此时, 了解每个属性所有细节并不重要。最大的收获在于，React 元素仅仅是 JavaScript 简单对象(plain old JavaScript objects)，用来描述组件的 HTML 应是怎样的结构，这个对象上不包含任何方法（Methods），仅仅只有数据。

通过之前 helloWorld React 元素的例子告诉你，helloWorld表示一个子节点为“Hello World!”文本的 div 标签。即使你创建了一个更复杂的 JSX 例子，生成的 React 元素仍将是一个 JavaScript 对象，配合其他嵌套 React 元素描述 HTML 将是怎样的结构。如果这让你感觉熟悉，是因为这正是虚拟 DOM（Virtual DOM）是什么（的解释） - 它是 DOM 在特定时间段应该是怎样的结构的描述，通过 React 元素声明来表示。

不同于 React 元素，你可能对 React 组件更熟悉一些。如果你曾写过类似下面例子的代码，那么你之前已经创建过 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}
                
                

                    
                
            
        );
    }
}

/*
 * 我假设你有可用的 React 和 ReactDom，以及  
 * 一个 id 为 "root" 的 HTML 元素
 * ReactDOM.render() 的返回值是组件实例
 */
var componentInstance = ReactDOM.render(, document.getElementById("root"));

上面的例子是用 ES2015 新的 Class 语法写的，但它几乎相当于使用 React.createClass()。你也许熟悉编写这些组件类，但重要的是（React文档中所述的）React 组件指代的是一个 React 组件类的实例。

假如你熟悉 JavaScript 的话，当你听到到“实例化一个类”且智商在线时，你可能会考虑使用new操作符。然而，（在 React 中）从不需要你用 new 操作符创建 React 组件。相反的是，你将使用 ReactDOM.render() 把一个 React 元素渲染成一个特定的 DOM 元素，与此同时，ReactDOM.render() 将返回一个 React 组件实例。

从 ReactDOM.render() 返回的组件实例可以调用在 React 组件类中定义的方法。反过来想一下会让你明白，ReactDOM.render() 是 React 为你实例化一个组件的机制。通常, 你不需要访问组件实例本身, 但我发现在测试 React 组件时, 将组件实例的引用保存下来（对测试）很有帮助。

与 ReactDOM.render() 有关的最后一个有趣的点是，React 在 ReactDOM.render() 时对虚拟 DOM 执行高效的 diff 算法（译者注: diff 算法延伸阅读）。如果你记得（上面说的），React 元素表示虚拟 DOM（元素），这意味着 ReactDOM.render() 接收一个虚拟 DOM（元素），将其渲染成一个真实 DOM 元素，返回（React 元素 type 指定的）组件实例。在底层，如果你将相同的React元素类型（带有可能不同的 props 值）通过 ReactDOM.render() 渲染成相同的 DOM 元素，React 将执行 diff 算法，对 DOM 元素进行仅必须的最小更改。也许令人惊讶的是，它每次返回相同的组件实例 - 除了更新的 prop 和 state 值。

前两节探讨了 React 元素和 React 组件实例，这两个概念都是 DOM 之上的抽象层。 现在我们将讨论术语“组件支撑实例”，以及它们自身如何与真实 DOM 元素相关联。

// 组件类
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 元素渲染到现有的 DOM 元素中来生成一个组件实例。正如我们已经知道的，组件实例不是真实 DOM 节点。然而，访问与组件实例关联的底层 DOM 节点实际上很简单 - 我们使用 ReactDOM.findDOMNode()，并将组件实例作为其参数传递。那么这与“组件支撑实例”术语有什么关系呢？让我们一脸懵逼的是，React 在其文档的各处将引用的真实 DOM 节点称之为组件支撑实例。

这3个术语“React 元素”，“React 组件”和“组件支撑实例”是密切相关的。 由于 JSX 语法被转译为 React.createElement()调用（译者注：理解转译这个概念可以参考 Compiling Vs Transpiling），最终返回我们称之为“React 元素”的 JavaScript 简单对象（plain old JavaScript objects），你可以将 React元素视为基础构建单元。React 组件实例表示下一个抽象层 - ReactDOM.render() 接收一个 React 元素、引用一个真实 DOM 节点、返回一个 React 组件实例。该实例可以访问组件类中定义的方法，但是在单元测试之外很少用到这一点。React 元素和 React 组件实例都不表示真实 DOM 元素。渲染组件实例产生的 DOM 元素被称为组件支撑实例，访问它的主要方式是使用ReactDOM.findDOMNode()。

我希望这篇文章能够帮助你理清这些术语！

[参考资料]

Backing Instances 翻译成 支撑实例 来自于 理解React中es6方法创建组件的this

声明式编程和命令式编程的比较

React 对循环 warning 提示增加 key 的研究

react精髓之一---diff算法

Compiling Vs Transpiling