理解场景背后的反应

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

1. Foo是一个组件类，<Foo />创建了所谓的 React元素，它是您希望React呈现的组件类的轻量级描述; <Foo />实际上变成了React.createElement(Foo)，它返回一个简单的对象。它实际上并不是在那时创建一个实例。 React在协调阶段查看这些元素，并在幕后实例化所需的组件。

   有关术语的详细信息，请参阅React (Virtual) DOM Terminology。

如果Bar从其render方法返回描述Foo的React元素，则

2. Foo只是Bar的子组件。在任何情况下，this都指向当前的Bar组件，this.props.xyz指的是当前Bar组件的道具。例如，如果你做了

   var Foo = React.createClass ({
     render: function() {
       return <Bar xyz="test" />;
     }
   });
   

   然后在Bar内，this.props.xyz将是值“test”，它从其父{{1}传递给Bar（就像函数的参数一样） }。

3. 如果确实需要，您可以使用refs来访问组件实例，但特别是在开始时，我建议不要这样做。这通常不是在React中完成任务的正确方法，您只需要在相对罕见的情况下访问组件实例。

Answer 2

1. 正确。 foo就像一个构造函数，但在场景下，当您键入React.createElement(foo, null)时，它会使用<foo />。

2. this在这种情况下会引用bar的实例，而不是构造函数。

3. 要保留foo的多个实例，只需将它们保存在常规变量中即可。

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

PS：约定为CamelCase班级名称（foo成为Foo）