6.JSX使用

JSX是快速生成react元素的一种语法，实际是React.createElement(component, props, ...children)的语法糖，同时JSX也是Js的语法扩展，包含所有Js功能。

为什么使用JSX

React认为渲染逻辑本质上与其他UI逻辑内在耦合，比如在UI中需要绑定处理事件、在某些时刻状态发生变化时需要通知到UI，以及需要在UI中展示准备好的数据。

React并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为组件的松散耦合单元之中，来实现关注点分离。

React不强制要求使用JSX，但是大多数人发现，在JavaScript代码中将JSX和UI放在一起时，会在视觉上有辅助作用，它还可以使React显示更多有用的错误和警告消息。

简单来说，JSX可以很好的描述页面html结构，很方便的在Js中写html代码，并具有Js的全部功能。

优点

快速，JSX执行更快，因为它在编译为JavaScript代码后进行了优化。

安全，与JavaScript相比，JSX是静态类型的，大多是类型安全的。使用JSX进行开发时，应用程序的质量会变得更高，因为在编译过程中会发现许多错误，它也提供编译器级别的调试功能。

简单，语法简洁，上手容易。

规则定义

• JSX只能有一个根元素，JSX标签必须是闭合的，如果没有内容可以写成自闭和的形式<div />。
• 可以在JSX通过{}嵌入Js表达式。
• JSX会被babel转换成React.createElement的函数调用，调用后会创建一个描述HTML信息的Js对象。
• JSX中的子元素可以为字符串字面量。
• JSX中的子元素可以为JSX元素。
• JSX中的子元素可以为存储在数组中的一组元素。
• JSX中的子元素可以为Js表达式，可与其他类型子元素混用；可用于展示任意长度的列表。
• JSX中的子元素可以为函数及函数调用。
• JSX中的子元素如果为boolean/null/undefined将会被忽略，如果使用&&运算符，需要确保前面的是布尔值，如果是0/1则会被渲染出来。
• 在对象属性中定义React组件，可以使用object的点语法使用该组件。
• React元素会被转换为调用React.createElement函数，参数是组件，因此React和该组件必须在作用域内。
• React元素需要大写字母开头，或者将元素赋值给大小字母开头的变量，小写字母将被认为是HTML标签。
• 不能使用表达式作为React元素类型，需要先将其赋值给大写字母开头的变量，再把该变量作为组件。