通过原生JS实现React的虚拟Dom及渲染方法

JSX语法通过Babel会转换为React.createElement（）形式的代码，所以也是为什么在引入react时，要将其命名为"React"。

// 实现React的createElement方法
const React = { // 它返回一个vNode虚拟节点
  createElement: function (type, props, ...children) {
    return {
      type,
      props,
      children
    }
  }
}
// 实现渲染函数
const render = (vNode, container) => {
  // 如果vNode为字符串，则返回一个文本节点
  if (typeof vNode === "string") {
    const text = document.createTextNode(vNode);
    return container.appendChild(text);
  }
  // 解构赋值
  const {type, props, children} = vNode;
  // 原生方法创建dom元素
  let ele = document.createElement(type);
  // 循环设置dom属性
  for (let key in props) {
    if (key.startsWith("__")) {
      continue;
    }
    ele.setAttribute(key,props[key]);
  }
  // 递归插属性值
  children.forEach( item => {
    render (item, ele)
  } )
  // 在容器内添加元素
  container.appendChild(ele)

}
// 测试，定义JSX语法
let div = <div><h1>React</h1>Very good!<span id="asdads">haha!<div>gogogo</div></span></div>
render (div, window.root)