博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React源码学习-创建组件过程(2)
阅读量:6926 次
发布时间:2019-06-27

本文共 1522 字,大约阅读时间需要 5 分钟。

初始化组件入口

当使用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://mfujl.baihongyu.com/

你可能感兴趣的文章
杂七杂八
查看>>
Lua代码提示和方法跳转
查看>>
关于时间差查询的一个小技巧
查看>>
Linux系列教程(十三)——Linux软件包管理之源码包、脚本安装包
查看>>
【.Net】优秀的开源框架
查看>>
Linux内存管理学习2 —— head.S中的段页表的建立
查看>>
sourcetree和Git的使用教程
查看>>
什么叫PV,UV,PR值
查看>>
2.Brackets安装及常用插件安装
查看>>
ajax用beforeSend自定义请求过程中客户端事件,提高用户体验
查看>>
一个屌丝程序猿的人生(七十八)
查看>>
资源贴——以备时时查询用
查看>>
phinx 使用指南
查看>>
Scala学习教程笔记二之函数式编程、Object对象、伴生对象、继承、Trait、
查看>>
PowerShell 异常处理
查看>>
LindDotNetCore~Polly组件对微服务场景的价值
查看>>
SQL Server 进制转换函数
查看>>
[C#] 通过重写 class 的 ToString() 来简化获取 enum 的 DescriptionAttribute 值
查看>>
镜像二叉树——剑指Offer
查看>>
Spring cloud config配置文件加密解密
查看>>