javascript - 了解 React 幕后

Question

我试图了解 React 中的“组件”。

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

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应该指“酒吧”，不是吗？为什么它仍然引用 foo ？

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

Answer 1

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

   参见 React (Virtual) DOM Terminology有关术语的更多信息。

2. Bar只是 Foo 的子组件如果Foo返回描述 Bar 的 React 元素从它的渲染方法。无论如何，this指当前Bar组件，和 this.props.xyz指当前Bar的 Prop 成分。例如，如果你这样做了

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

   然后里面Bar , this.props.xyz将是传递给 Bar 的值“test” (就像一个函数的参数)来自其父级 Foo .

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