React 0.13 brings parent-based context instead of owner-based context.

So, i can't quite understand the difference between owner and parent ponents. Examples will be appreciated.

React 0.13 brings parent-based context instead of owner-based context.

So, i can't quite understand the difference between owner and parent ponents. Examples will be appreciated.

• javascript
• reactjs

2 Answers 2

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

In the above example, A is the owner of B and C, because A creates both of the ponents.

However, B is the parent of C because C is passed as child to B.

More information can be found in the 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.

From the official documentation:

An owner is the ponent that sets the props of other ponents

Here an example where A is the owner of B:

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

A is the owner of B because B is created in A's render function.

This is an example where A is the parent of 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')
);

In this example, A is the parent of B because A's props.children contains B. But A has no direct knowledge of that its the parent of B, its children could be any ponent.