JSX 简介

const h1 = <h1>Hello, world!</h1>;

上面就是 JSX 语法，JSX 就是在 JavaScript 的基础上扩展了 html 模板，使得可以在 JavaScript 中编写 html，生成虚拟 DOM。

虚拟 DOM

虚拟 DOM 为了提高前端框架的渲染性能创造出来的产物，它有着比真实 DOM 更轻更小的资源消耗，Vue、React 等框架通过良好的 Diff 算法，筛选出更改的 DOM 进行更改，而没有更改的 DOM 就不需要修改，减少了页面重排或重绘的数量，提高了页面渲染性能。

虚拟 DOM 生成方法

Vue 中的 render 函数有一个 createElement 方法进行 vNode（虚拟 DOM）的创建。

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

React 扩展库 ReactDOM 中有 createElement 方法可以创建虚拟 DOM：

const vDOM = React.createElement('h1', { id: 'myTitle' }, 'Do you know my title? No! You don\'t', React.createElement('br'), React.createElement('a', { href:　'http://www.baidu.com'}, '跳转到百度' ))

但是 Vue 提供了模板，我们可以编写 Vue 模板很好地进行编程。React 提供了 JSX 给我们方便快速地创建虚拟 DOM。

提醒：用 Vue-cli 3.0 或更新的版本创建的 Vue 项目也加入了对 JSX 的支持。

JSX 的语法规则

1. 定义虚拟 DOM 时不需要写引号；
2. 混入 JavaScript 表达式时用花括号 { 1 + 2 }；
3. class 属性应写为 className；
4. 内联样式 style 标签的值要传入一个对象 style={ { background: 'red', } }；
5. 只能有一个根标签；
6. 标签必须闭合；
7. html 原生标签首字母用小写，component 标签首字母用大写（Vue 我一直都不喜欢小写组件名，现在又多了一个理由了，哈哈，小写它不兼容 JSX）；