React--JSX

1. JSX的本质是什么？和js之间的关系？

   JSX是JavaScript的一种语法的扩展，它和模板语言很接近，
   但是它充分具备JavaScript的能力
   

2. 为什么要用JSX？不用什么后果？
   jsx语法如何在js生效 —> Babel
   jsx相当于js的语法糖，最后执行的还是React.createElement（）
   Facebook公司的定位是JavaScript的“扩展”，决定了浏览器不会像支持js一样地支持jsx
   这是js创建虚拟DOM：子节点需要React.createElement创建，若有多个很繁琐
   这是jsx创建虚拟DOM：子节点若有多个开发起来很简便
   

• 虚拟DOM与真实DOM:
  1.虚拟DOM是Object类型的对象，
  2.虚拟DOM比较“轻”，属性比真实DOM少，因为虚拟DOM是React内部在用。无需真实DOM上那么多的属性
  3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

3. JSX背后的功能模块是什么？这个功能模块都做了哪些事情？
   createElement相当于数据处理层
   
   
   

4. 总结：

   React.createElement对JSX进行数据处理、清洗，JSX即是React.createElement()的语法糖
   ReactElement是符合虚拟DOM规范的JS对象，ReactElement即是虚拟DOM，是将createElement出来的数据结构化。
   React.render将虚拟节点变成真实节点挂载在DOM节点上
   

5. jsx语法：

    jsx语法规则：
      1.定义虚拟DOM时，不要写引号
      2.标签中混入JS表达式时要用{}
      3.样式的类名指定不要用class，要用className
      4.内联样式，要用 style={{key: value}}的形式去写
      5.只有一个根标签
      6.标签必须闭合
      7.标签首字母：
         (1)若小写字母开头，则将改标签为html中同名元素，若html中无该标签对应的同名元素，报错
         (2)若大写字母开头，react就去渲染对应组件，若组件没有定义，报错