React Object Model

Classes and Objects


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

class UserDefinedComponentClass extends React.Component{}

var UserDefinedComponentClass2 = React.createClass();


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(
        null,  // key
        null,  // ref
        internalInstance._currentElement._owner,  // owner
        null,  // context


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


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


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 of UserDefinedComponentClass or DOMAutoGenerateWrapperClass, it links to React internal class instance by _reactInternalInstance field.


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


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.


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
<My /> // compositeComponent


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

您正在使用您的 账号评论。 注销 /  更改 )

Twitter picture

您正在使用您的 Twitter 账号评论。 注销 /  更改 )

Facebook photo

您正在使用您的 Facebook 账号评论。 注销 /  更改 )

Connecting to %s