脚本宝典收集整理的这篇文章主要介绍了

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
}

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过