文章目录
一、JSX的基本使用:
1. createElement()的问题:
- 繁琐不简洁;
- 不直观, 无法一眼看出所描述的结构;
- 不优雅, 用户体验不爽;
2. jsx简介:
jsx是JavaScript XML的简写, 表示在JavaScript代码中写XML(HTML)格式的代码;
优势:
- 声明式语法更直观, 与HTML结构相同, 降低了学习成本, 提升开发效率
- JSX是React的核心内容
3. 使用步骤:
3.1 使用JSX语法创建React元素
const title = <h1>Hello JSX</h1>
3.2 使用ReactDOM.render()方法渲染react元素到页面中:
ReactDOM.render(title, root)
4. 为什么脚手架中可以使用JSX语法:
- JSX不是标准的ECMAScript语法, 它是ECMAScript语法的扩展;
- 需要使用babel编译处理后, 才能在浏览器环境中使用;
- create-react-app脚手架中已经默认又该配置, 无需手动配置;
- 编译JSX语法的包: https://www.babeljs.cn/docs/babel-preset-react
ps:
- React元素的属性名使用驼峰命名法;
- 特殊属性名:
- class => className;
- for => htmlFor;
- tabindex => tabIndex;
- 推荐: 使用"小括号包裹Jsx", 从而避免编辑器往js中自动插入分号
二、JSX中使用javascript表达式:
1. 嵌入js表达式
- 数据存储在js中
- 语法:
{js表达式}
const name = "tom"
const div = (
<div>你好, 我的名字是: {name}</div>
)
2. 注意点:
- 单大括号中可以使用任意的JavaScript表达式;
- jSX自身也是js表达式;
- js中的对象是个例外, 一般只会出现在style属性中;
- 不能在
{}
中出现语句(如: if/for);
三、JSX的条件渲染:
可以使用if/else
或三元表达式、逻辑与(&&)运算符实现
四、JSX的列表表达式:
如果要渲染一组数据, 应该使用数组的map()
方法;
ps: 渲染列表时应该添加key属性, key属性的值要保证唯一;
尽量避免使用索引号作为key;
原则: map()
遍历谁, 就给谁添加key属性;
const songs = [
{id:1, name: "歌曲1"},
{id:2, name: "歌曲2"},
{id:3, name: "歌曲3"},
]
const list = (
<ul>
{songs.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
)
五、JSX的样式处理
1. 行内样式 – style
const title = <dev style={{color: 'red', backgroundColor: 'skyblue'}}>
<h1>hello react</h1>
</dev>
ReactDOM.render(
title,
document.getElementById('root')
);
2. 类名 – className
./imdex.css
.title {
color: red;
text-align: center;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const title = <dev className="title">
<h1>hello react</h1>
</dev>
ReactDOM.render(title, document.getElementById('root'));