JSX到原生DOM是怎么炼成的

let ele = <div id="div" className="red">hello
  	<span className="blue">word</span>
  </div>;

ReactDOM.render(ele,document.getElementById('root'))

console.log(ele);

let eleObj = {
  type: 'div', // 就是什么标签嘛
  props:{ // 属性 包括子节点
    className: 'red', // class
    id: 'div',  // id
    children:[  // 子节点
      'hello',  // 文本子节点
      {         // 子节点对象
        type:'span',
        props:{
          className:'blue',
          children:['word']
        }
      }
    ]
  }
}

// 模拟render函数
function render(eleObj, container){
  // 解构出标签的类型和属性对象
  let {type, props} = eleObj;
  // 创建一个DOM元素
  let ele = document.createElement(type);
  // 循环属性对象
  for (let attr in props){
    if(attr == 'children'){
      props[attr].forEach(item => {
        if(typeof item == 'string'){
          let textNode = document.createTextNode(item);
          ele.appendChild(textNode);
        } else {
          // 递归调用
          render(item, ele);
        }
      })
    } else if(attr == 'className') {
      ele.setAttribute('class',props[attr]);
    } else {
      ele.setAttribute(attr, props[attr]);
    }
  }
}