jsx详解

1、全称：javaScript XML
2、react定义的一种类似于XML的JS扩展语法：js + XML
更高效创建虚拟DOM

3 语法规则：

• 定义虚拟DOM时，不要写引号。
• 标签中混入JS表达式时要用{}
• 样式的类名指定不要用class，要用className。
• style写法 style={{color:‘white’,fontSize:‘29px’}}(外边的大阔号表示里面放的js表达式，里边的大阔号表示一个对象)
• 只有一个根标签
• 标签必须闭合
• 标签首字符

  若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
  若大写字母开头，react就去渲染相应的的组件，若组件没有定义，则报错。

【补充】

• XML早期用于存储和传输数据,后来被JSON取代
  原因是：XML存储的信息会附带标签，JSON就不用，比较轻便，具有parse和stringify两个属性，转化数据类型很方便
• 关于虚拟DOM：
  1、本质是Object类型的对象（一般对象）
  2、虚拟DOM比较"轻",真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
  3、虚拟DOM最终会被React转化为真实的DOM，呈现在页面上

区分【js表达式】和【js语句（代码）】

1，表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
例 a a+b demo(1) arr.map function aaa(){}
2 语句
例 if(){} swich(){} for(){}