JSX
一、JSX 的基本使用
React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
不需要一定使用 JSX，但它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
1、使用步骤
（1）使用 JSX 语法创建 react 元素
// 使用 JSX 语法，创建 react 元素：
const title = <h1>Hello JSX</h1>
（2）使用 ReactDOM.render() 方法渲染 react 元素到页面中
// 渲染创建好的React元素
ReactDOM.render(title, root)
如下所示：
2、为什么脚手架中可以使用 JSX 语法？
1.JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。
2. 需要使用 babel 编译处理后，才能在浏览器环境中使用。
3. create-react-app 脚手架中已经默认有该配置，无需手动配置。
4. 编译 JSX 语法的包为：@babel/preset-react 。
二、JSX 中使用 JavaScript 表达式
可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下
const name = '王欢'
const dv = (
<div>你好，我叫：{name}</div>
)
如下所示：
const name = '王欢'
const dv = (
<div>你好，我叫：{name}</div>
)
ReactDOM.render(dv,document.getElementById('root');
打印结果为：
需要注意的是：
- 单大括号中可以使用任意的 JavaScript 表达式
- JSX 自身也是 JS 表达式
- JS 中的对象是一个例外，一般只会出现在 style 属性中
- 不能在{}中出现语句（比如：if/for 等）
三、JSX 的条件渲染
场景：loading效果
条件渲染：根据条件渲染特定的 JSX 结构
可以使用if/else或三元运算符或逻辑与运算符来实现。
如下所示：
const loadData = ()=>{
if(isloading){
return <div>loading...</div>
}else{
return <div>数据加载完成，此处显示加载后的数据</div>
}
}
const title = (
<h1>条件渲染:{loadData()}</h1>
)
ReactDOM.render(title,document.getElementById('root'))
当我们设置isloading为true时，则有：
当我们设置isloading为false时,有：
四、JSX 的列表渲染
如果要渲染一组数据，应该使用数组的 map() 方法；渲染列表时应该添加 key 属性，key 属性的值要保证唯一。
原则：map() 遍历谁，就给谁添加 key 属性
注意：尽量避免使用索引号作为 key。
如下：
const songs = [
{id: 1, name: '小欢'},
{id: 2, name: '小冉'},
{id: 3, name: '小刘'},
{id: 4, name: '小熊'}
]
const list = (
<ul>{songs.map(item => <li key={item.id}>{item.name}</li>)}
</ul> )
ReactDOM.render(list,document.getElementById('root'))
打印结果为：
五、JSX 的样式处理
1、行内样式 —— style
代码格式如下：
<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
JSX的样式处理
</h1>
如下：
2、类名 —— className
代码格式为：
<h1 className="title">
JSX的样式处理
</h1>
如下：
在index.css文件中添加：
.title{
text-align:center
}
运行结果为：