默认的react调用方式为 render(要渲染的组件,要放到的节点)
const React={
createElement(tag,props,...children){
return {
tag,
props,
children
}
}
}
//渲染分为两种渲染,一种是文本节点渲染,一种是标签节点渲染()
const render=(vNode,container)=>{
//如果单纯传过来一个字符串
if(typeof vNode=="string"){
var fragment=document.createTextNode(vNode);
container.appendChild(fragment)
}else if (typeof vNode=="object") {
//如果传过来的是一个对象,那么就默认它是一个React对象,先模式解析后再操作
let {tag,props,children}=vNode;//模式解构如果参数不够用,左边不能再用...运算符,不够用的话会默认分配到最后一项去
console.log(children)
var wrapper=document.createElement(tag)
wrapper.setAttribute("class",props)
//遍历所有子项
for(var i of children){
render(i,wrapper)//递归函数
}
container.appendChild(wrapper)
}
}
var div=React.createElement("div","wrapper", React.createElement("span", null, "zuimei"),"fjsdjf")
render(div,window.root)