React源码学习-创建组件过程(2)

初始化组件入口

当使用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
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值