JSX，了解一下？

JSX是神马
- 书写规范
JSX中的{}
- 属性
- children
- 防止xss
- 其它注意事项
JSX 与单入口
JSX 与模板引擎的区别
JSX是对真实DOM的描述

JSX是神马

JSX是React中特有的东东，全称 Javascriptのxml。

它的长相是这样的

let jsx = <h1>hello</h1>;
复制代码

看起来就是一个普通的html标签不是？嗯。。。慢着。。。看看做左边，我们将这个html标签赋给了一个js变量!

what!? 这是什么操作？

嘿，这就是JSX的功能了。我们说JSX的全称应该翻译为Javscriptのxml（Javscript中的xml），而没有翻译成Javascript和xml，这是因为比起xml/html标签，这更像是在javascript中扩展了一个功能，它把xml当做变量的值赋给js变量，这是对javascript语法的延伸。

另外如果只考虑JSX的长相，我们也常常把它称之为 jsx tag。

书写规范

JSX 支持换行

let jsx = (
    <div>
    	<h1>hello</h1>
    </div>
)
复制代码

需要注意的是老版本的React如果你换行但没带上()作为注释的话，那么React会自动在=后填上;，就会报错！

JSX中的{}

{}能帮助我们更好的描述一个JSX tag的 属性 和 children。

属性

一个JSX tag 也能像xml/html 标签元素一样拥有很多的属性，像这样

let jsx = <img src='./xxx...'/>
复制代码

这个属性的值可以是一个固定的字符串，也可以是一个动态的js变量，但这个js变量必须利用{}包裹起来。（Vue中这货称之为mustache）

let src = './1.jpg';
let jsx = <img src={src} />
复制代码

children

另外{}其实能包含任何JS表达式（只要有返回值，返回原生js对象除外），甚至是延伸出的JSX tag。 并且{}不仅能作为属性的值，还能作为一个JSX tag的子元素（文本或Element）。

let className = 'class1';
let src = './1.jpg';
let element2 = <img src={src} alt='1.jpg'/>;
let element = (
  <div className={className}>
    {element2} //<----看这里！！！
  </div>
);
复制代码

其它注意事项

我们说了{}只能放表达式，什么样的不是表达式呢，像这样的

<div>{let i = 123;i}</div> //<---错误的示范！！！会报错
复制代码

另外{}中禁止放置JS对象，会报错

但{}中放置null是不会报错的，放置null表示什么都不渲染

防止xss

{}中返回的若是一个JSX，且是一个脚本，{}会自动将其转换成普通的字符串防止脚本注入。

JSX 与单入口

一个js变量它并不会管它所接受的JSX tag内部是否包含了其它JSX tag，但它有一个原则，那就是它只能接受一个JSX tag作为入口。

这意味着如果你给js变量赋值时你得JSX长这样，就会报错

let jsx = (
    <div></div>
    <img />
)
复制代码

JSX 与模板引擎的区别

综上所述JSX中的{}让其拥有了类似模板引擎的功能，但它比模板引擎更强大，因为它是javascript语法的延伸：

你可以把它作为一个变量的值，在if和for循环中使用它
也能把它当做参数传递给函数
还能作为函数的返回值返回。

JSX是对真实DOM的描述

上面我们说了这么多，但实际上JSX代表了什么呢？它代表的就是一个DOM元素吗？

这样的认知是不大稳妥的，实际上它是对 DOM元素的一种描述，并不是DOM元素本身。

前面所说的JSX tag们都会在编译后变成这样

//编译前
let jsx = <h1 className="class1">hello</h1>
//编译后
React.createElement(
    'h1' //类型
    ,{className:'class1'} //标签属性键值对
    ,'hello' //children节点
)
复制代码

而这个React.createElement函数最会生成一个对象，我们称之为React对象或则还有一个更高逼格的名称虚拟DOM。

{
  type: 'h1',
  props: {
    className: 'class1',
    children: 'hello'
  }
}
复制代码

这个react元素是对即将要生成的真实DOM的一种描述，React会根据这个对象的描述渲染出真正的dom元素。

注意: 当只有一个子元素时，children的值是一个字符串或则对象，但存在多个子元素时，则会成变成一个数组，每个数组中存放着对应的子元素。

ToBeContinue...