把JSX语法转为虚拟DOM对象

把JSX语法转为虚拟DOM对象

一、JSX虚拟DOM渲染为真实DOM的原理和步骤

1. 基于babel-preset-app把jsx语法变为React.createElement的模式
   =>凡是遇到元素标签（或者组件）都要createElement
   =>前两个参数是固定的：标签名（组件名）、属性对象（没有就是null），第三个及以后的参数是子元素
2. 基于React.createElement方法的执行，创建出虚拟DOM对象（JSX对象）
   =>首先是一个对象
   =>type属性：存储的是标签名/组件名
   =>peops属性：没有子元素，也没有任何行内属性，则为空对象{}；如果createElement执行时传递了属性，那就把传递的属性都给props；如果有子元素，则props会新增一个children的属性，可能是一个值，也可能是一个数组
3. 基于ReactDOM.render把创建的虚拟DOM对象渲染到页面指定的容器中
   =>ReactDOM.render([JSXOBJ], [CONTAINER], [CALLBACK])
   =>[CALLBACK]渲染完成之后触发的回调函数，在这里可以获取到真实的DOM

二、代码实现

// 1、创建一个JSX虚拟DOM对象（可以使用babel直接帮忙转译）
let jsxOBJ = React.createElement("div", null, /*#__PURE__*/React.createElement("h2", {
  style: {
    color: 'red'
  }
}, "\u6211\u662F\u6807\u9898"), "\u54C8\u54C8", /*#__PURE__*/React.createElement("p", {
  className: "box",
  id: "hhh"
}, "\u6B22\u8FCE\u6765\u5230react\u8BFE\u7A0B\u5B66\u4E60"), /*#__PURE__*/React.createElement("span", {
  id: "12"
}), /*#__PURE__*/React.createElement("i", null));
// 打印JSX虚拟DOM对象 jsxOBJ
console.log(jsxOBJ);
// 观察打印出来的对象，发现虚拟DOM最终渲染的结果主要取决于 type跟props 这两个属性。而且props中的children属性也同样重要

// 代码实现
React.createElement = function(type, props, ...children){
  let jsxOBJ = {
    type,
    props: {}  // 默认是一个空对象
  };
  // 如果传递了属性，则把传递的属性都拷贝一份给jsxOBJ.props
  if(props) {
    jsxOBJ.props = {...props}
  }
  // 如果传递了子元素，还需要给jsxOBJ的props设置一个children属性
  if(children.length) {
    // 如果只传递了一个子元素，那么props.children的值不是一个数组了，而是子元素对象
    if(children.length === 1) {
      jsxOBJ.props.children = children[0];
    }else {
      jsxOBJ.props.children = children;
    }
  } 
  return jsxOBJ;
}