React Object Model

https://github.com/yiminghe/learning-react/blob/master/tutorial/en-us/internal/object-model.md

Classes and Objects

UserDefinedComponentClass

user can define custom component class by call React.createClass or extend React.Component

class UserDefinedComponentClass extends React.Component{}

var UserDefinedComponentClass2 = React.createClass();

DOMAutoGenerateWrapperClass

component class represents native DOM nodes

// source from react
function autoGenerateWrapperClass(type) {
  return ReactClass.createClass({
    tagName: type.toUpperCase(),
    render: function() {
      // Copy owner down for debugging info
      var internalInstance = ReactInstanceMap.get(this);
      return new ReactElement(
        type,
        null,  // key
        null,  // ref
        internalInstance._currentElement._owner,  // owner
        null,  // context
        this.props
      );
    }
  });
}

ReacCompositeComponentWrapper

React internal class for render custom component and DOM component to native platform.

ReactDOMComponent

React internal class for render DOM component to native platform in the end.

ReactElement/element

class for virtual DOM node (element), element’s type field will be the paramter passed to React.createElement.

var custom = <My />; //React.createElement(My);
var div=<div/>;//React.createElement('div');
div instanceof ReactElement //true
custom instanceof ReactElement //true

instance

instance of UserDefinedComponentClass or DOMAutoGenerateWrapperClass, it links to React internal class instance by _reactInternalInstance field.

reactInternalInstance

there are two types of React internal class instance: compositeComponent and domComponent.

compositeComponent

element will link to it by _owner field. owner is the component which element is created from its render() method.

It also link to component class instance by _instance field, instance and reactInternalInstance are 1-1.

It links to React internal class instance transformed from its render() method’s return value by _renderComponent field, so render method can not return array.

domComponent

In the end, it all goes to domComponent, dom component will render its children recursively(_renderedChildren), each of its children is a React internal class instance.

<div>  // domComponent
<a> // domComponent
1 // domTextComponent
</a>
<My /> // compositeComponent
</div>
Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s