初始化组件入口

当使用react创建组件时,首先会调用instantiateReactComponent,这是初始化组件的入口函数,它通过判断node类型来区分不同组件的入口。

1.当node为空时,说明node不存在,则初始化空组件ReactEmptyComponent.create(instantiateReactComponent)

2.当node为对象类型时,即是DOM标签组件或者自定义组件,那么element类型为字符串时,则初始化DOM标签组件ReactNativeComponent.crateInternalComponent(element),否则初始化自定义组件ReactCompositeComponentWrapper()

3.当node类型为字符串或者数字时,则初始化文本组件ReactNativeComponent.createInstanceForText(node)

4.如果其他情况的话则不做处理。

clipboard.png

instatiateReactComponent方法的源码如下:

//function instantiateReactComponent(node, parentCompositeType) {
    var instance;
    
    //空组件
    if(node === null || node === false) {
        instance = ReactEmptyComponent.create(instatiateReactComponent)
        //为什么传入的是instatiateReactComponent,不太了解
    }
    
    if(type node === 'object') {
        var element = node;
        if(typeof element.type === 'string') {
            //DOM标签(ReactDOMComponent)
            instance = ReactNativeComponent.createInternalComponent(element)
        }else if(isInternatComponentType(element.type)) {
            //不是字符串表示的自定义组件暂无法使用,此处不做组件初始化操作
            instance = new element.type(element)
        }else {
            //自定义组件
            instance = ReactCompositeComponentWrapper();
        }
    }else if(typeof node === 'string' || typeof node === 'number'){
        //字符串或者数字(ReactTextComponent) 
        instance = ReactNativeComponent.createInstaceForText(node)
    }else {
        //不做处理
    }
    
    //设置实例
    instance.construct(node);
    //初始化参数
    instance._mountIndex = 0;
    instance._mountImage = null;
    
    return instance
}

本文固定链接: http://www.js-code.com/node-js/node-js_37579.html