1.JSX定义:
JSX：是 JavaScript XML的缩写。
-
在 JS 代码中书写 XML 结构
- 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法,jsx创建元素最终会被被解析过成:
React.createElement('要创建的标签名', {id或类名}, '标签内容')
- React用它来创建 UI（HTML）结构 理解：我们之前用html写页面，现在是用jsx来写页面
2.jsx示例
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
// jsx创建元素
const list = <ul><li>hello zkp</li><li>js</li><li>zkp hello/li><ul>
// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))
3.JSX的注意事项:
1.JSX必须要有一个根节点(有点像vue项目中template中的根节点)
格式：<> xxx </>作为根节点或者直接使用<div></div>标签
import ReactDOM from 'react-dom'
//1. <> xxx </>作为根节点使用
const title = <> <h1>Hello React</h1><p>p标签</p> </>
//2. <div></div>作为根节点使用
const title =<div> <h1>Hello React</h1><p>p标签</p></div>
ReactDOM.render(title, document.querySelector('#root'))
2.属性名不能用js中的关键字。例如class, for
- class ---改写成-> className
- for ------改写成-> htmlFor
3.单标签要闭合
<input> ---> <input />
4. 换行建议使用( )包裹
const content = (
<div>
<h1>xxx</h1>
</div>
)
5.老版本(16.8)先引入react才能使用jsx
4.JSX基本使用:
{}语法:
**{ }**是一种特殊的语法，让 JSX 解析器知道它需要将它们之间的内容解释为 JavaScript代码 而不是字符串
作用：执行{ }内部的代码，并输出结果。
1.嵌入表达式:
// 嵌入表达式格式:
import ReactDOM from 'react-dom'
const num = Math.random()
const title = (<div>
随机值：{ num }
</div>)
ReactDOM.render(title, document.querySelector('#root'))
嵌入表达式的位置
1.属性:
const logo = 'https://create-react-app.dev/img/logo.svg'
<img width="80" src={logo} />
2.内容:
const name = '给我一个div'
<div>{name}</div>
{ }里可书写的内容:
可以写
-
表达式
定义：数据类型和运算符的组合（可以单独出现数据类型，也可以数据类型+运算符的组合）
特点：有值（或者能够计算出一个值）； 能被console.log()
-
其他的jsx表达式
-
函数
-
注释
不可以写
- 对象
- js语句：if 语句/ switch-case 语句/ 变量声明语句
实例
// 导入依赖
import React from 'react'
import ReactDOM from 'react-dom'
const person = {
name: 'zkp',
age: 20,
logo: 'https://create-react-app.dev/img/logo.svg',
study: ['js', 'node.js','vue.js','react.js']
}
const f1 = () => {
return <i>{person.study.join(',')}</i>
}
const baseInfo = (
<div>
姓名: {person.name}
年龄: {person.age}
</div>
)
const content = (
<div style={{ padding: 50 }}>
<h1>jsx-表达式</h1>
{/* 1. {} 可以用在内容上 */}
{/* {}可以包其他的jsx */}
{baseInfo}
{/* {}可以包表达式 */}
<p>爱好:{person.study}</p>
<p>字符串:{'abc'}</p>
<p>数组:{[1, 2, 3]}</p>
<p>数值:{100}</p>
<p>函数：{f1()}</p>
<p>算数表达式：100/2={100 / 2}</p>
<p>
三元表达式：{person.age < 28 ? '我是鹏哥' : '鹏哥是我'}
</p>
{/* 2. {}可以用在属性值上 */}
<p className={['class1', 'class2'].join(' ')}>类名组合</p>
<img width="80" src={person.logo} />
// 下面是错误的示范
// 不能输出对象，不能使用语句
<p>{{ a: 1 }}</p>
<p>{var a =1 }</p>
</div>
)
ReactDOM.render(content, document.getElementById('root'))
2.JSX-条件渲染
示例
简单情况-用三元表达式
const flag = 0
const content = (<div>{flag ? '达成' : '没有达成'}</div>)
简单情况-用逻辑与
const isLogin = true
const content = (<div>{ isLogin && '您登录了'}</div>)
复杂情况-使用额外的函数
const loadData = (isLoading) => {
if (isLoading) {
return <div>数据加载中，请稍后...</div>
} else {
return <div>数据加载完成，此处显示加载后的数据</div>
}
}
const content = <div>{loadData(true)}</div>
3.JSX-列表渲染
示例:
// 从后端取回来的数据保存在数组中，需要用列表展示
const skills = [
{ id: 1, name: 'html' },
{ id: 2, name: 'css' },
{ id: 3, name: 'js' }
]
// 生成的dom结构如下：
ul>
<ol>技能1：html</ol>
<ol>技能2：css</ol>
<ol>技能3：js</ol>
</ul>
实现:
利用数组方法map
const list = (
<ul>
{skills.map(item => <ol>技能{item.id}: {item.name}</ol>)}
</ul>
)
列表渲染中的key
作用:
React内部用来进行性能优化时使用，在最终的HTML结构中是看不到的(类似vue中列表渲染的:key)
改进上面的代码如下:
// 添加key={item.id}
const list = ( <ul> {skills.map(item => <ol key={item.id}>技能{item.id}: {item.name}</ol>)} </ul> )
4.JSX 样式处理
4.1行内样式 - style
格式
<dom元素 style={ {css属性1：值1,css属性2：值2} }></dom元素>
示例
// 行内样式
<h1 style={ {color: 'red', width: 200, backgroundColor: 'black'} }>
我是黑底红字的h1
</h1>
要点
-
为啥有两个{{ }}
- 外层的{}表示 要开始写js了
- 内层的{}表示是一个对象({这里写样式的时候{}里可以写对象)
-
属性名是小驼峰格式 (background-color ===> backgroundColor)
-
属性值是字符串, 如果单位是px，可以简写数值
4.2使用 className
要点
- 用className（不是class）定义类名
- 把样式写在额外的.css文件中，然后引入.css文件
import './index.css'
// 类名
<h1 className="title">
我是黑底红字的h1
</h1>
5.JSX 整体总结
- React 使用 JSX 来编写 UI（HTML）
- React 完全利用 JS 语言自身的能力来增强 UI 的编写 - 能用 JS 来实现的功能绝不会增加一个新的 API
- 现在，就可以使用 React 来编写任意 UI 结构了
