React 中重要的 JSX

了解 JSX

• React 使用 JSX 来替代常规的 JavaScript。

• JSX (JavaScript XML) 是一种 JavaScript 的语法扩展，运用于 React 架构中，其格式比较像是模版语言，但事实上完全是在 JavaScript 内部实现的。元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素，React 使用 JSX 来描述用户界面。

• 通俗的讲，JSX 将 < 开头的解析成 html，将 { 开头的解析成 javascript

为什么用 JSX 更好呢？

举个例子：
创建一个如下的简单列表：

用 js 需要这样：

var child1 = React.createElement('li',null,'hello')
var child2 = React.createElement('li',null,'world')
var root = React.createElement('ul',{className:'list'},child1,child2)

而使用 JSX：

<ul className="list">
	<li>hello</li>
	<li>world</li>
</ul>

JSX 优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

React 小常识

• 自定义组件名，第一个字母大写；
• 可以给 html 添加类但 class 需改写成 className，另外若添加自定义的要渲染的属性，最好以 data- 开头；
• 若 JSX 元素没有子元素/节点，可以使用 /> 来闭合标签（单闭合）；
• 可以通过 {props} 往 html 中插入变量或任意有效的 JS 表达式，而无须加上 $；
• 由于 JSX 更贴近 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性（驼峰法）。