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一样
事件也是正常绑定.