JSX解析

什么是JSX

JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言。
1、可以在常规的html代码标签中插入**任意有效的JS表达式(包括函数）**无需加上$

<div>{
   函数名(参数props)}</div>

2、JSX编译后是一个函数调用，返回值为JS对象，所以JSX也可以作为表达式
3、在标签中添加属性，属性值为字符串时使用""，为对象或表达式时使用{}，key采用驼峰命名，另外添加自定义需要渲染的属性，最好以data-开头

const element = <div tabIndex="0"></div>;

const element = <img src={
   user.avatarUrl}></img>;

4、JSX标签没有子节点时可以单闭合

JSX将XML语法加入到JavaScript中，在JS中写了JSX将会被预处理成React Element

React与JSX的联系：
渲染的逻辑处理与UI逻辑其实是耦合的, event, state, data互相关联，既然如此，那么就把html标记语言与逻辑处理相关的js内容放在一起，组成一个松耦合的模块，这个模块就是JSX元素

JSX能做什么

写JSX的前提：
在普通的JS文件中需引入react,reactDOM(若要对DOM进行操作)以及babel或者通过Babel在线编译

react将JSX代码片段分为几块，类型(元素名), 属性值props(包含children和属性参数等), key和ref, owner和store

{}包住的默认是字符串，会进行转义，而{}包住的则会被当作表达式，不被转义

如果想在表达式里进行转义成HTML怎么做

1、使用Unicode编码

var esca = <a href='https://baidu.com'><span>5&gt;3 {
   true && '\u003Ethis is true'}