简单实现 ReactDom.render(el,root)

React.createElement

我们知道jsx是React.createElement的语法糖，而且React.createElement返回的其实也是一个对象，所以我们简单封装了下React.createElement，如图
在这里插入图片描述
使用的时候可以使用babel的一些插件，将jsx语法转化成React.createElement，可以百度搜教程，这里直接使用在线babel转换，

在这里插入图片描述
然后打印下我们ele看是什么，
然后就需要挂载模板了

这个render函数我们可以自己简单实现一下，如图

首先可以判断，我们传入的是对象，还是字符串，
如果是字符串则直接创建文本节点，追加到第二个参数模板中，如上图。
如果是虚拟DOM节点，那就要做相对应操作了，先处理属性，在这里插入图片描述
先拿到tag是div还是span啥的，然后创建这个标签，然后如果arrts不为null，证明有属性，如
这些属性需要做处理然后放到DOM节点上去，所以需要封装一个函数

接受三个参数，给哪个DOM节点操作，操作的属性是什么，属性对应的值是什么，我们先从简单处理起，如className是要转换成class的，
在这里插入图片描述
接着对事件处理，如onClick,onBlur,…

正则表达式匹配到，然后给dom加上相对应的事件操作即可。
接着对样式style进行处理，因为style有两种，一种是style=""内联样式，一种是style={width:30/30px}

内联的处理，判断value不存在，或者value的属性为string,直接赋予上去，,用cssText接受，
如果另一种，对象的形式，
在这里插入图片描述
则应该取出来，然后判断值是数字，还是后面加px的，做i相对应的处理如上图。
最后就是一些其他乱七八糟的属性了
可以先判断有没有这个值得存在，有的话直接更新，没有的话新建一个，写错了图片，否则就是为空值，直接移除即可这样就对属性的操作解决了。

最后就是第三个属性childrens得操作了，先看下children得格式在这里插入图片描述
children有可能是字符串，也有可能是新的React.createElement对象，这些情况render函数已经处理了没所以可以直接递归调用
这样就会都渲染出来，如图

跟我们一开始写的jsx一样在这里插入图片描述

事件也是正常绑定.

捋清楚思路，首先根据babel将jsx语法转成React.createElement，该函数我们自己写了，返回一个对象，对象得内容分别是tag（什么标签），arrts(属性如style,事件等等)，childrens（新的对象，包含string或者新的React.createElement）。

将该对象传递以及模板传递给我们的render后，render里面第一步就是判断是不是空，或者是不是字符串，做出相对应操作，如果是虚拟DOM，就证明是React.createElement返回的对象，那么首先，应该拿到tag标签，创建完然后直接插入到模板里面去，接着，判断属性，如果arrts不为null，证明有属性，可以有style,className,事件onClick，或者其他属性等等，我们可以封装一个函数，做相对应的处理。第三步就是处理第三个属性childrens，childrens刚才看了babel也是转换成对象，如果没有标签包裹，babel是直接转换成字符串，有的话就转换成新的React.createElement对象，然后我们可以递归遍历这个childrens，在里面继续调用render函数，将我们得tag标签作为模板传进去，使其子节点都挂载在这个父模板上。