目录
扫描二维码关注公众号，回复：
14780442 查看本文章
1. JSX 的基本使用
1.1 createElement() 的问题
1.
繁琐不简洁。
2.
不直观，无法一眼看出所描述的
结
构。
3.
不优雅，用户体验不爽。
1.2 JSX 简介
JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码。
优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率
JSX 是 React 的核心内容。
1.3 使用步骤
1.
使
用
JSX
语法创
建
react
元素
// 使用 JSX 语法，创建 react 元素：
const title = <h1>Hello JSX</h1>
2.
使
用
ReactDOM.render()
方法渲
染
react
元素到页面中
// 渲染创建好的React元素
ReactDOM.render(title, root)1.4 小结 ：
1.
推荐使
用
JSX
语法创
建
React
元素
2.
写
JSX
就跟写
HTML
一样，更加直观
、
友好
3.
JSX
语法更能体现
React
的声明式特点（
描
述
UI
长什
么
样子）
4.
使用步骤：
// 1 使用JSX创建react元素
const title = <h1>Hello JSX</h1>
// 2 渲染创react元素
ReactDOM.render(title, root)1.5 思考： 为什么脚手架中可以使用JSX 语法？
1. JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。
2. 需要使用 babel 编译处理后，才能在浏览器环境中使用。
3.create-react-app 脚手架中已经默认有该配置，无需手动配置。
1.6 注意点
1.
React
元素的属性名使用驼峰命名法
2.
特殊属性名
：class
->
className
、for
->
htmlFor
、
tabindex
->
tabIndex
。
3.
没有子节点的
React
元素可以用
/>
结束
。
4.
推荐：使用
小括号包
裹
JSX
，从而避免
JS
中的自动插入分号陷阱。
// 使用小括号包裹 JSX
const dv = (
<div>Helo JSX</div>
)2. JSX 中使用 JavaScript 表达式
2.1 嵌入 JS 表达式
数据存储
在
JS
中
语法
：
{
JavaScript
表达式
}
注意：语法中
是
单大括
号
，不是
双
大括号！
const name = 'Jack'
const dv = (
<div>你好，我叫：？？？</div>
)const name = 'Jack'
const dv = (
<div>你好，我叫：{name}</div>
)2.2 注意点
单大括
号
中可以使用任意
的
JavaScript
表达式
JSX
自身也是
JS
表达式
注意
：JS
中的对象是一个例外，一般只会出
现
在
style
属性中
注意
：
不能在{}中出现语
句
（比如
：if/for
等）
const h1 = <h1>我是JSX</h1>
const dv = (
<div>嵌入表达式：{h1}</div>
)3. JSX 的条件渲染
场景
：loading
效果
条件渲染：根据条件渲染特定
的
JSX
结构
可以使用
if/else
或
三元运算
符
或
逻辑与
运
算
符
来
实
现
const loadData = () => {
if (isLoading) {
return <div>数据加载中，请稍后...</div>
}
return (
<div>数据加载完成，此处显示加载后的数据</div>
)
}
const dv = (
<div>
{loadData()}
</div>
） 
4. JSX 的列表渲染
如果要渲染一组数据，应该使用数组的 map() 方法
注意：渲染列表时应该添加 key 属性，key 属性的值要保证唯一
原则：map() 遍历谁，就给谁添加 key 属性
注意：尽量避免使用索引号作为key
const songs = [
{id: 1, name: '痴心绝对'},
{id: 2, name: '像我这样的人'},
{id: 3, name: '南山南'},
]const list = (
<ul>
{songs.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
)5. JSX 的样式处理
1.行内样式 —— style
<h1 style={
{ color: 'red', backgroundColor: 'skyblue' }}>
JSX的样式处理
</h1>2.类名 —— className（推荐）
<h1 className="title">
JSX的样式处理
</h1>JSX总结： 总结
1.
JSX
是React
的核心内容。
2.
JSX
表示在
JS
代码中写
HTML
结构，是
React
声明式
的
体现。
3.
使用
JSX
配合嵌入的
JS
表达式、条件渲染、列表渲染
，
可以描
述
任
意
UI
结构。
4.
推荐使用
className
的方式给
JSX
添加样式。
5.
React
完全利
用
JS
语言自身的能力来编写
UI，
而
不
是
造
轮
子
增强
HTML
功
能。