JSX产生的原因
由于通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不爽
JSX的概述
SX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码
优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率
使用步骤
import React from 'react'
import ReactDOM from 'react-dom'
// 1.使用JSX创建react元素
const title = <h1>Hello JSX <span>这是span</span></h1>
// 2.渲染react元素
ReactDOM.render(title, document.getElementById('root'))
为什么在脚手架中可以使用JSX语法
- SX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
- 需要使用babel编译处理后，才能在浏览器环境中使用
- create-react-app脚手架中已经默认有该配置，无需手动配置
- 编译JSX语法的包： @bable/preset-react
注意点：
- React元素的属性名使用驼峰命名法
- 特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
- 如果没有子节点的React元素可以用
/>来结束 - 推荐：使用 小括号包裹JSX，从而避免JS中自动插入分号报错
例子
const title = (
<h1 className="title">
Hello JSX
<span />
</h1>
)
JSX中使用JavaScript表达式
import React from 'react'
import ReactDOM from 'react-dom'
/*
JSX中使用JavaScript表达式
*/
const name = 'Jack'
const age = 19
const title = (
<h1>
Hello JSX, {name}, 年龄：{age}
</h1>
)
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
image.png
注意点:
- 只要是合法的js表达式都可以进行嵌入
- JSX自身也是js表达式
- 注意：js中的对象是一个例外，一般只会出现在style属性中
- 注意：在{}中不能出现语句
import React from 'react'
import ReactDOM from 'react-dom'
/*
JSX中使用JavaScript表达式的注意点：
*/
// 函数调用表达式
const sayHi = () => 'Hi~'
const dv = <div>我是一个div</div>
const title = (
<h1>
Hello JSX
<p>{1}</p>
<p>{'a'}</p>
<p>{1 + 7}</p>
<p>{3 > 5 ? '大于' : '小于等于'}</p>
<p>{sayHi()}</p>
{dv}
{/* 错误演示 */}
{/* <p>{ {a: '6'} }</p> */}
{/* { if (true) {} } */}
{/* { for (var i = 0; i < 10; i++) {} } */}
</h1>
)
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
条件渲染
- if-else
import React from 'react'
import ReactDOM from 'react-dom'
/*
条件渲染：
*/
const isLoading = true
//if-else
const loadData = () => {
if (isLoading) {
return <div>loading...</div>
}
return <div>数据加载完成，此处显示加载后的数据</div>
}
const title = (
<h1>
条件渲染：
{loadData()}
</h1>
)
// 渲染react元素
ReactDOM.render(title , document.getElementById('root'))
image.png
- 2三元表达式
import ReactDOM from 'react-dom'
/*
条件渲染：
*/
const isLoading = true
// 三元表达式：
const loadData = () => {
return isLoading ? (<div>loading...</div>) : (<div>数据加载完成，此处显示加载后的数据</div>)
}
const title = (
<h1>
条件渲染：
{loadData()}
</h1>
)
// 渲染react元素
ReactDOM.render(title , document.getElementById('root'))
- 3.逻辑与运算符
import React from 'react'
import ReactDOM from 'react-dom'
/*
条件渲染：
*/
const isLoading = true
//逻辑与运算符：
const loadData = () => {
return isLoading && (<div>loading...</div>)
}
const title = (
<h1>
条件渲染：
{loadData()}
</h1>
)
// 渲染react元素
ReactDOM.render(title , document.getElementById('root'))
列表渲染
- 如果需要渲染一组数据，我们应该使用数组的 map () 方法
- 注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一
- 原则：map()遍历谁，就给谁添加key属性
- 注意：尽量避免使用索引号作为key
import React from 'react'
import ReactDOM from 'react-dom'
/*
列表渲染：
*/
// 歌曲列表：
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>
)
// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))
image.png
样式处理
- 1.行内样式 -style
类名 -className
<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>
这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐
- 2.类名 -className
- 创建CSS文件编写样式代码
.container {
text-align: center
}
在js中进行引入，然后设置类名即可
import './css/index.css'
<li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>
总结：
- JSX是React的核心内容
- JSX表示在JS代码中写HTML结构，是React声明式的体现
- 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
- 推荐使用className的方式给JSX添加样式
- React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能
网友评论