CODEWITHSUNDEEP
javascriptreactjs
Morgan Wilde
Morgan Wilde

Reputation: 17303

When is `React.createClass({})()` called

I'm digging through the React.js source and this is what I'm currently trying to understand.

var ReactClass = {
    /*
    * @param {object} spec Class specification (which must define `render`).
    * @return {function} Component constructor function.
    * @public
    */
    createClass: function(spec) {
        var Constructor = function(props, context) {
            // ...
            this.props = props;
            this.context = context;
            this.state = null;

            // ReactClasses doesn't have constructors. Instead, they use the
            // getInitialState and componentWillMount methods for initialization.
            var initialState = this.getInitialState ? this.getInitialState() : null;
            // ...
            this.state = initialState;
        };

        Constructor.prototype = new ReactClassComponent();
        Constructor.prototype.constructor = Constructor;
        // ...
        mixSpecIntoComponent(Constructor, spec);
        // ...
        return Constructor; // <--- Who calls this?
    },
    // ...
};

When calling React.createClass({}) you get the Constructor function that takes two parameters props, context.

Where is this function/method called, I.e. who does the actual React.createClass({})(someProps, someContext)?

Upvotes: 0

Views: 665

Answers (1)

glortho
glortho

Reputation: 13200

It is not straightforward, you're right.

The short answer is that Constructor is called by React.render.

See here for the actual instantiation block: https://github.com/facebook/react/blob/4c3e9650ba6c9ea90956a08542d9fa9b5d72ee88/src/renderers/shared/reconciler/instantiateReactComponent.js#L75

The basic path is this:

  • You create a ReactClass, which has a return value of Constructor.
  • When you create a factory (either directly with React.createFactory or abstractly via JSX), your class gets bound to React.createElement as type, with the bound function getting returned (see here).
  • This bound function is what is actually getting called when you call your class with (or without) props.
  • When this is passed to render as node, the render method (linked above) sets an element variable to the node argument and then instantiates it directly or passes it to other libs to instantiate.

Upvotes: 2

Related Questions