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...