React学习：JSX
什么是JSX？
（1）JSX 是 JavaScript 的一种扩展语法。它具有 JavaScript 的全部能力。
（2）JSX 可以生成 React “元素”。
（3）JSX 也是一个表达式。特别在编译之后，JSX 表达式就变成了常规的 JavaScript 对象。
从本质上讲，JSX 只是为 React.createElement(component, props, …children) 函数提供的语法糖。
JSX长什么样？
const element = Hello, bty
;
是不很像js和html的结合产物。
1、JSX 中嵌入表达式
要想在JSX中嵌入js表达式，就把js表达式放在 花括号 “{}” 里即可。
这里用函数作为表达式举例。
(1)无参数
注意：上面myfun函数的return值，只要带html标签(eg:上面用的< span>)实质就是一个JSX。
输出：hello,bty
(2)有参数
注意：上面myfun函数的return值，只要带html标签(eg:上面用的< span>)实质就是一个JSX。
输出：hello,bty! my age：12
2、JSX 也是一个表达式
编译之后，JSX 表达式就变成了常规的 JavaScript 对象
【说白了就是：JSX编译后就成了对象，然后就能做对象能做的事】
这意味着你可以在 if 语句或者是 for 循环中使用 JSX，用它给变量赋值，当做参数接收，或者作为函数的返回值。
function getGreeting(user) {
if (user) {
return Hello, {formatName(user)}!
;
}
return Hello, Stranger.
;
}
3、用 JSX 指定属性值
您可以使用双引号来指定字符串作为属性值：
const element = ;
您也可以用花括号嵌入一个 JavaScript 表达式作为属性值:
const element = 
;
在属性中嵌入 JavaScript 表达式时，不要使用引号来包裹大括号。否则，JSX 将该属性视为字符串而不是表达式。
对于字符串值你应该使用引号，对于表达式你应该使用大括号，但两者不能同时用于同一属性。
4、用 JSX 指定子元素
如果是空标签，您应该像 XML 一样，使用 />立即闭合它：
const element = ;
JSX 标签可能包含子元素：这样还方便阅读
const element = (
Hello!
Good to see you here.
);
5、命名方式
比起 HTML ， JSX 更接近于 JavaScript ， 所以 React DOM 使用驼峰(camelCase)属性命名约定, 而不是HTML属性名称。
例如，classname 在JSX中变为className，tabindex 变为 tabIndex。
6、JSX 防止注入攻击
在JSX中嵌入用户输入是安全的
const title = response.potentiallyMaliciousInput;
// 这样是安全的:
const element = {title}
;
默认情况下， 在渲染之前, React DOM 会格式化JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击。
7、JSX 表示对象
下面的两个例子是是完全相同的：
//element就是React元素
const element = (
Hello, world!
);
//Babel 将JSX编译成 React.createElement() 调用。
//element就是React元素
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement() 会执行一些检查来帮你编写没有bug的代码，但基本上它会创建一个如下对象：
// 注意: 这是简化的结构
//element就是React元素
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
这些对象被称作“React元素”。你可以把他们想象成为你想在屏幕上显示内容的一种描述。
React会读取这些对象，用他们来构建DOM，并且保持它们的不断更新。
注意：Booleans, Null, 和 Undefined 被忽略
false，null，undefined，和 true 都是有效的 children(子元素) 。但是并不会被渲染，下面的JSX表达式渲染效果是相同的：
{false}
{null}
{undefined}
{true}
如果在输出中想要渲染 false ，true，null 或者 undefined ，你必须先将其转化为字符串:
eg:
{String(null)},{String(true)},{String(undefined)}
输出：null,true,undefined
若改为
{String(null),String(true),String(undefined)}
则输出：undefined
小结：写react其实就是在写js
下面分别是在js和react中插入一个dom节点的例子：
- JS
const node = document.createElement("P"),
textnode = document.createTextNode('hello word');
node.appendChild(textnode);
document.getElementById('root').appendChild(node);
- React
const htmlStr = <p>hello word</p>;
ReactDOM.render(htmlStr, document.getElementById('root'));
其实写react本质就是在写js，只是js插入dom节点时比较繁琐，而react的则化繁为简，仅用一句话（起名为JSX）
就完成了js下面三句的功能
当然，其实上面react的那一句话最终还是会编译转化为下面js的三句。