目录
-
JSX是什么
JSX就是符合xml规范的JS，其语法格式比HTML严谨很多。React使用JSX来代替常规的JavaScript。
渲染的时候，JSX本质是先在内部转换为createElement的形式，再渲染到页面上。
-
JSX的优点
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化；
- 它是类型安全的，在编译过程中就能发现错误；
- 使用 JSX 编写模板更加简单快速；
-
JSX可以做什么
- 渲染数字
- 渲染字符串
- 渲染布尔值
- 为属性绑定值
- 渲染jsx元素
- 渲染jsx元素数组
- 将普通字符串数组，转为jsx数组并渲染到页面上
※ JSX中可以直接写js，但是必须写在大括号{ }中！
-
注意点
- JSX中添加属性时，分别使用 className 和 htmlFor 代替 class 和 for；
- JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹 ；
- JSX语法中，标签必须成对出现，如果是单标签，则必须自闭和 ；
※ 当编译引擎在编译JSX代码的时候，如果遇到了 < 那么就把它当作HTML代码去编译，如果遇到了 {} 就把花括号内部的代码当作JS代码去编译。
-
实例：多层嵌套html
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>
<h1>这是一个嵌套多层html的实例</h1>
<p>当嵌套多个 HTML 标签时，需要使用一个 div 将多层标签包裹起来。</p>
<p data-myattribute="attibute">当在标签中添加自定义属性时，需要再属性前面增加data前缀</p>
</div>,
document.getElementById("example")
);
</script>
</body>
</html>-
实例：JSX中写入javascript代码
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>
<h1>js表达式要写在{}内</h1>
<p>3 + 2*2 = {3 + 2*2}</p>
</div>,
document.getElementById("example")
);运行结果：
-
实例：JSX中写入三元表达式
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
ReactDOM.render(
<div>
<h1>JSX中可以使用三元表达式</h1>
<p>3 是否大于 2*2 ： {3 > 2*2 ? 'true' : 'false'}</p>
</div>,
document.getElementById("example")
);-
实例：内联式样
<div id="example"></div>
<script type="text/babel">
var myStyle = {
fontSize: 60,
color: '#FF0000'
};
ReactDOM.render(
<div>
<h1>JSX中可以使用内联式样，渲染时会自动在指定元素后面添加px。</h1>
<p style={myStyle}>这是我的小实验</p>
</div>,
document.getElementById("example")
);
</script>运行结果
-
实例：数组
<script type="text/babel">
var myArr = [
<h3>这是数组的第一个元素</h3>,
<h3>这是数组的第二个元素</h3>,
<h3>这是数组的第三个元素</h3>
];
ReactDOM.render(
<div>
<h1>JSX中可以插入数组，渲染时数组会自动展开。</h1>
{myArr}
</div>,
document.getElementById("example")
);
</script>运行结果
JSX的学习暂时就到这里了，这只是最基本的简单应用，至于如何更灵活高效的应用还需要在以后的实际工作中继续练习，接下来将学习：JSX的组件