- JSX是神马 - 书写规范 - JSX中的{} - 属性 - children - 防止xss - JSX 与 单入口 - JSX 与 模板引擎的区别 - JSX是对真实DOM的描述 [TOC] ## 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> ); ``` ### 防止xss `{}`中返回的若是一个`JSX`，且是一个脚本，`{}`会自动将其转换成普通的字符串防止脚本注入。 ### 其它注意事项 我们说了`{}`只能放表达式，什么样的不是表达式呢，像这样的 ``` <div>{let i = 123;i}</div> //<---错误的示范！！！会报错 ``` 另外`{}`中禁止放置JS对象，会报错 但`{}`中放置`null`是不会报错的，放置null表示什么都不渲染 ## 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元素。 --- ToBeContinue...