目录

• 1 前言
• 2 实现Virtual DOM的2种形态
  • 1 纯JSON格式
  • 2 非JSON格式
• 3 下一篇
• 4 参考

前言

回顾React创建组件的三种方式：(其中React.createClass 16版本后已废弃)

react三种component.png
无论是纯函数还是组件，都返回一个(<div>...</div>)HTML格式的内容,这段代码并不是合法的js代码，它是一种被称为jsx的语法扩展，通过它我们就可以很方便的在js代码中书写html片段。[1]

本质上，JSX是语法糖，上面这段代码会被babel转换成如下代码

const title = React.createElement(
    'h1',
    { className: 'title' },
    'Hello, world!'
);

你可以在babel官网提供的在线转译测试jsx转换后的代码，这里有一个稍微复杂一点的例子
如何将转义后的数据渲染到浏览器中，本篇文章将介绍2种方式，这里为了更好理解，完整例子都模仿React写法实现。

实现Virtual DOM的2种形态

不依赖第三方库
用js对象模拟DOM树可以有2种形态：纯JSON格式和非JSON格式

1.纯JSON数据

{type:"...", props: {...}, children: [...]}

{
type:'ul', 
props:{}, 
children:[
    {
      type:'li',
      props:{class:'list'},
      children:[
          {
            type:'input', 
            props:{value:'Niko',class:'list',keyup:this.change},
            children:[]},
      ]
    },
    {
      type:'li', 
      props:{},
      children:['Bellic']}
  ]
}

属性	类型	描述
type	string	DOM 节点名称
props	object	DOM属性attrs或events函数
children	array[str/obj]	数组内为对象时表示子节点，循环上述；字符串时为标签内容

设置type

let $el = document.createElement(type)

设置props

从上述表中可以看出，不仅可以添加class等attrs属性，

$el.setAttribute(propName, propValue)

有些元素还有添加事件的需求。
但是JSON格式最终只能存储字符串，不能存储一个可执行的函数更不用说this的作用域，所以处理事件可以使用addEventListener(…)注册事件，值得注意的是这里的事件类型就不能添加on-*前缀了。

if(typeof propValue === 'function'){
  //props events
  $el.addEventListener(
    propName,
    propValue
  );
}else {
  //props attrs
  $el.setAttribute(propName, propValue)
}

设置children

当标签内不再添加标签，children需要设置为[string]表示标签的内容。当标签内为一系列子标签时，格式将和上一次一样循环。在实现渲染时很容易想到利用递归进行插值

function createElement(node){
  node.children.map(child=>{
    $el.appendChild(createElement(child))
  });

  //最终目的是要返回$el
  return $el
}

完整代码戳这里👇
https://gist.github.com/1uokun/bcfaec28d8c5051be343ca390bb3001e

拓展

Virtual DOM差异化对比[2]
setState和props传递实现[4]

2.非JSON格式

JSX转义格式，和1区别在于DOM树每一层都有一个执行函数，

 var el = React.createElement;
 var ul = el('ul', {id: 'list'}, [
  el('li', {class: 'item'}, ['Item 1']),
  el('li', {class: 'item'}, ['Item 2']),
  el('li', {class: 'item'}, ['Item 3'])
])

这种格式实现就比较容易理解，针对每一层Virtual DOM进行解析

function createElement(tag, attrs, children) {...}

完整代码戳这里👇
https://gist.github.com/1uokun/e4ed774cb523bbc5425266119de520e5

下一篇

前面大致了解了JSX工作原理，不过都是用静态HTML实现，并且数据格式较繁琐，如何舒舒服服写JSX格式的代码，又能自动转换成合法的JavaScript？自然会想到前端工程化和webpack工具
下一节将介绍不依赖React如何使用webpack配置并打包JSX：Use JSX without React 2:编译JSX和Component实现

参考

• [1] 依赖React和React-dom实现JSX和虚拟DOM 慕课笔记
• [2] 深度剖析：如何实现一个 Virtual DOM 算法 胡子大哈
• [3] 如何实现一个自己的Virtual DOM medium.com
• [4] 如何实现一个自己的Virtual DOM 2: Props & Events medium.com
• [5] can i use jsx without React to inline html in script? stackoverflow