React学习——Day3
在React中启用JSX语法
1. 淘汰React.createElement()写法
如果采用React.createElement()创建虚拟DOM的方法来写页面，如果页面上有成百上千个元素，而且元素之间有复杂的嵌套关系，这种写法就太麻烦了。对于页面UI元素来说，最简单最有效的书写形式就是写HTML，因为HTML是最优秀的标记语言。能不能像下面这样来创建虚拟DOM元素呢？
const mydiv = <div id="mydiv">这是一个div元素</div>
答案是可以的。像这种在JS中混合写入类似于HTML的语法，叫做JSX语法——符合XML规范的JS。但是在JS文件中，默认是不能写这种类似于HTML的标记的。如果想让以上写法生效，需要用到babel来转换这些JS中的标签。
2. 引入babel
可以像下面这样引入babel：
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 此区域可以写JSX语法
</script>
注意：这种在浏览器中使用babel来编译JSX的方式效率是非常低的，生产环境中不建议使用。
这里我们用到的JSX语法的本质其实就是在运行的时候通过babel将JSX语法转换成React.createElement()的API调用。JSX中的标签我们可以把它看成是对象，因此它不像HTML那样是直接放到浏览器上显示的，是作为JS对象最终通过ReactDOM.render()方法渲染到浏览器上的。
3. JSX语法注意事项
- 在JSX语法中，要把JS代码写到{ }中。
- JSX语法控制的区域写注释，也要把注释写到{ }中。 推荐{/* */}写法。
- 为JSX中的元素添加class类名，需要使用className来替代class；htmlFor替换label标签的for属性。很明显，这是为了与JS关键字进行区分。
- 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹。
- 在JSX语法中，标签必须成对出现，如果是单标签，则必须自闭和！因为XML规范要比HTML严格得多。
当编译引擎在编译JSX代码的时候，如果遇到了<那么就把它当作HTML代码去编译，如果遇到了{}就把花括号内部的代码当作普通JS代码去编译。
4. 使用JSX语法
React03.html演示了JSX语法的具体用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React03</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let id = "myDiv"; // 为属性绑定值
let num = 10; // 渲染数字
let str = '你好，中国'; // 渲染字符串
let boo = true; // 渲染布尔值
const p = <p>哈哈哈</p>; // 渲染JSX元素
const arr = [ // 渲染JSX元素数组
<h2>我是H2</h2>,
<h3>我是H3</h3>
];
const mydiv = <div id={id} title="this is a div" style={{color: "red", backgroundColor: "yellow"}}>
这是div
<h1>这是一个大大的H1</h1>
{num + 2}
<hr/>
{str}
{/* 这是注释 */}
<hr/>
{boo.toString()}
<hr/>
{p}
<hr/>
{arr}
<hr/>
<p className="testClass">测试类名</p>
<hr/>
<label htmlFor="testFor">测试for属性</label>
<hr/>
</div>;
ReactDOM.render(
mydiv,
document.getElementById('app')
);
</script>
</body>
</html>
运行结果如下：
打开控制台之后发现，报了如下警告：
提示我们数组当中的每一个元素都应该有一个key值，关于key值的重要性我们明天再来说明