ReactcreateElement方法使用原理分析介绍.docx

第

ReactcreateElement方法使用原理分析介绍

目录摘要1.创建方法2.处理type3.处理config4.处理children5.对比真正的React.createElement源码

摘要

在上一篇说过，React创建元素有两种方式：

第一种是通过JSX方式创建，第二种是通过React.createElement方法创建。但是通过JSX创建React元素的方式，最终也会经过babel进行转换，再用React.createElement进行元素创建。

而这一篇文章，主要是讲一下React.createElement是如何创建React元素的。

1.创建方法

为了了解React.createElement这个方法，我们自己手动去实现一个简易版的。

OK，首先我们通过React.createElement方法创建一个React元素，并且打印出来：

constb=React.createElement(div,{data:1234},oneTwo)

console.log(b);

打印出来的结果为：

所以，如果我们要实现出来React.createElement这个方法，定义的时候我们可以这么写：

functioncreateElement(type,config,children){

letprops={}

letmyType=

letkey=

letref=

return{

$$typeOf:react.element,

type:myType,

props,

key,

}

这里我们不管**$$typeOf**这个变量，只考虑其他的变量，最终返回的对象应该是这个数据结构。

2.处理type

好了，方法的定义已经写完了。针对于传进来的这三个参数，我们一个一个看。

第一个参数type，它代表的是创建React元素的类型。

这里面可以是传统的HTML元素，例如div，h1，span等标签。

也可以是一个React组件（注意这里哦）。

而React创建组件又有两种方式，所以type的值，有三种数据类型：

（1）字符串：例如div,h1,span,p等标签

（2）函数：通过函数的方式创建React组件

（3）类：通过class的方式创建React组件

而这个时候就有一个问题！

classDemo{

typeofDemo

上面的值应该为什么呢？答案是function，所以在这里我们只需要考虑type为string和function两种类型即可。

所以我们可以写一个判断类型的方法：

functionisValidElementType(type){

if(typeoftype===string||typeoftype===function){

returntrue;

returnfalse;

}

在我们的主方法里面引用：

functioncreateElement(type,config,children){

letprops={}

letmyType=

letkey=

letref=

if(isValidElementType(type)){

myType=type;

return{

$$typeOf:react.element,

type:myType,

props,

key,

}

3.处理config

对于React.createElement方法的第二个参数，接收看一个对象。而对象下所有的属性，都会被放在props里面。

这句话对不对呢？其实也不是很对，是有特例的，如果在这个对象下，有key或者ref这两个属性。它是不会被放在props里面的，而是直接赋值给key和ref

Ok，有了上面的话，我们就可以对config进行处理了：

if(config!=null){

if(config.ref){

ref=config.ref

if(config.key){

key=config.key

for(letpropNameinconfig){

if(!([ref,key].includes(propName))){

props[propName]=config[p