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

Question

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

So, I can not understand the difference between the owner and the parent components. Examples will be appreciated.

Answer 1

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

In the above example, A is the owner for B and C because A creates both components.

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

More information can be found in the documentation .

It is important to distinguish between the owner-owner relationship and the parent-child relationship. Owner-owner relationships are specific to Response, while parent-child relationships are just the one you know and love in the DOM.

Answer 2

From the official documentation:

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

Here is 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 the A 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, since A props.children contains B. But A does not have direct knowledge that its parent is B, its children can be any components.