React源码学习-创建组件过程（2）

最新推荐文章于 2025-12-31 17:15:11 发布

转载最新推荐文章于 2025-12-31 17:15:11 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015298546

文章标签：

#javascript #ViewUI

本文深入解析React中组件初始化的过程，包括不同类型的React组件如何被创建和初始化，如空组件、DOM标签组件、自定义组件及文本组件等。通过具体源码分析，帮助读者理解React组件生命周期的起点。

初始化组件入口

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

1.当node为空时，说明node不存在，则初始化空组件ReactEmptyComponent.create(instantiateReactComponent)
2.当node为对象类型时，即是DOM标签组件或者自定义组件，那么element类型为字符串时，则初始化DOM标签组件ReactNativeComponent.crateInternalComponent(element)，否则初始化自定义组件ReactCompositeComponentWrapper()

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

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

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
}