Question

我正在挖掘React.js来源，这是我目前正在努力理解的内容。

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?
    },
    // ...
};

调用React.createClass({})时，您会获得带有两个参数Constructor的{{1}}函数。

这个函数/方法在哪里被调用，即。谁做实际的props, context？

Answer 1

这不是直截了当的，你是对的。

简短的回答是Constructor调用了React.render。

请参阅此处了解实际的实例化块：https://github.com/facebook/react/blob/4c3e9650ba6c9ea90956a08542d9fa9b5d72ee88/src/renderers/shared/reconciler/instantiateReactComponent.js#L75

基本路径是：

您创建了ReactClass，其返回值为Constructor。
当您创建工厂（直接使用React.createFactory或通过JSX抽象）时，您的类将React.createElement绑定为type，并返回绑定函数（请参阅{{ 3}}）。
当您使用（或不使用）道具调用您的班级时，此绑定函数实际上被调用。
当render作为node传递给render时，element方法（上面链接）将node变量设置为var myNewIcon = L.icon({ iconUrl: 'my-icon.png', iconRetinaUrl: 'my-icon@2x.png', iconSize: [38, 95], iconAnchor: [22, 94], popupAnchor: [-3, -76], shadowUrl: 'my-icon-shadow.png', shadowRetinaUrl: 'my-icon-shadow@2x.png', shadowSize: [68, 95], shadowAnchor: [22, 94] });参数，然后实例化直接或将其传递给其他lib实例化。

什么时候``React.createClass（{}）（）`调用

1 个答案: