了解 React 幕后

Question

我试图在 React 中了解 'Components'。

我有几个问题，所以我认为社区是问他们的最佳场所。

1 - 当我们这样做时：

var foo = React.createClass ({
...
});

Console.log 告诉我这是一个构造函数。所以当我们做 <foo /> 时，我们正在创建 foo 的实例（对象），对吗？

2 - 我对 this 特别困惑，这里是示例：

var bar = React.createClass ({
    render = function () {
        if (this.props.xyz) {
          ...
        }
    }
});

现在 <bar /> 是 foo 的子组件。当 bar 实例被实例化时， this 应该引用 'bar'，不是吗？为什么它仍然引用 foo？

3 - 假设我创建了 <foo /> 的多个实例。我们如何存储对每个特定对象的引用？

Answer 1

Foo 是一个组件 class，<Foo /> 创建所谓的 React 元素 ，这是一个您希望 React 渲染哪个组件的轻量级描述 class； <Foo /> 实际上变成了 React.createElement(Foo)，returns 是一个简单的对象。它实际上并没有在那个时候创建一个实例。 React 在协调阶段查看这些元素，并在幕后实例化它需要的组件。

有关术语的详细信息，请参阅 React (Virtual) DOM Terminology。
Bar 只是 Foo 的子组件，如果 Foo returns 一个 React 元素从其 render 方法描述 Bar .无论如何，this 指的是当前Bar 组件，this.props.xyz 指当前Bar 组件的props。例如，如果您这样做了
```
var Foo = React.createClass ({
  render: function() {
    return <Bar xyz="test" />;
  }
});
```
然后在 Bar 中，this.props.xyz 将是值 "test"，它从其父级传递给 Bar（就像函数的参数）， Foo.
如果您确实需要，您可以使用refs访问组件实例，但特别是在开始时，我建议不要这样做。这通常不是在 React 中完成任务的正确方法，您应该只需要在相对罕见的情况下访问组件实例。

Answer 2

React.createElement(foo, null)

    a = React.createElement(foo, null); //or a = <foo />
    b = React.createElement(foo, null); //or b = <foo />

PS：约定是CamelCaseclass的名字（foo变成Foo）

Understanding React Behind The Scene