React.js 中的所有者组件和父组件有什么区别

Question

React 0.13 带来 parent-based context instead of owner-based context.

所以，我不太明白所有者组件和父组件之间的区别。示例将不胜感激。

Answer 1

var A = React.createClass({
    render() {
        return (
            <B>
                <C />
            </B>
        );
    }
});

在上面的示例中，A 是 B 和 C 的 所有者，因为 A 创建了两个组件。

但是，B 是 C 的父级，因为 C 作为子级传给了 B。

可以在 documentation 中找到更多信息。

It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM.

Answer 2

来自官方文档：

An owner is the component that sets the props of other components

这里是 A 是 B 的所有者的示例：

var A = React.createClass({
  render: function() {
    return <B />;
  }
});

A 是 B 的所有者，因为 B 是在 A 的 render 函数中创建的。

这是一个示例，其中 A 是 B 的父级：

var A = React.createClass({
  render: function() {
    return <div>{this.props.children}</div>;
  }
});

var B = React.createClass({
  render: function() {
    return <span>B</span>;
  }
});

React.render(
  <A><B /></A>,
  document.getElementById('example')
);

在此示例中，A 是 B 的父级，因为 A 的 props.children 包含 B。但是 A 不直接知道它是 B 的父级，它的子级可以是任何组件。

React.js 中的所有者组件和父组件有什么区别

What is the difference between owner and parent component in React.js

javascript

reactjs