react创建一个元素
React.createElement的格式:
React.createElement(‘标签名’,{标签上的属性1:值1},子元素1,子元素2)
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
// 创建元素
const title = React.createElement('h1', {id:'box'}, 'hello react')
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
React.createElement的格式 :繁琐不简洁,不直观,无法一眼看出所描述的结构,不优雅,开发体验不好,接下来看看JSX穿件组件
JSX是什么
JSX:是 JavaScript XML的缩写。
- 在 JS 代码中书写 XML 结构
- 注意:JSX 不是标准的 JS 语法,是 JS 的语法扩展。脚手架中内置了包,用来解析该语法。
- React用它来创建 UI(HTML)结构
理解:我们之前用html写页面,现在是用jsx来写页面
jsx示例:
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
// jsx创建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>
// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))
优势:
- 采用类似于 HTML 的语法,降低了学习成本,会 HTML 就会 JSX
- 充分利用 JS 自身的能力来创建 HTML 结构。比如,利用 JS 数组的 map 方法创建列表结构
JSX的注意事项
掌握JSX的5个注意事项
内容
- jsx必须要有一个根节点
- 属性名不能用js中的关键字。例如class, for
- 单标签要闭合
- 换行建议使用( )包裹
- 老版本(16.8)先引入react才能使用jsx
jsx必须要有一个根节点
虚拟根节点:<> xxx </>
import ReactDOM from 'react-dom'
const title = <> <h1>Hello React</h1><p>p标签</p> </>
ReactDOM.render(title, document.querySelector('#root'))
有两种格式:<React.Fragment> xxx </React.Fragment>
import ReactDOM from 'react-dom'
const title = <React.Fragment> <h1>Hello React</h1><p>p标签</p> </React.Fragment>>
ReactDOM.render(title, document.querySelector('#root'))
属性名不能用js中的关键字
例如class, for
- class -> className
- for ->htmlFor
单标签要闭合
<input>
—<input />
老版本(16.8)先引入react才能使用jsx
理解引入react的作用(提供createElement的功能)
老版本中不引入就会报错React must be in scope when using JSX
JSX-嵌入表达式
嵌入表达式的格式:
{ JS 表达式 }
例如:
import ReactDOM from 'react-dom'
const num = Math.random()
const title = (<div>
随机值:{ num }
</div>)
ReactDOM.render(title, document.querySelector('#root'))
大括号是一种特殊的语法,让 JSX 解析器知道它需要将它们之间的内容解释为 JavaScript代码 而不是字符串
作用:执行{}内部的代码,并输出结果。
嵌入表达式的位置
- 属性值
const logo = 'https://create-react-app.dev/img/logo.svg'
<img width="80" src={logo} />
- 内容
const name = '小芳'
<div>{name}</div>
注意: 单花括号中可以写什么?
可以写
- 表达式
- 定义:数据类型和运算符的组合(可以单独出现数据类型,也可以数据类型+运算符的组合)
- 特点:有值(或者能够计算出一个值); 能被console.log()
- 其他的jsx表达式
- 注释
不可以写
- 对象
- js语句:if 语句/ switch-case 语句/ 变量声明语句
JSX-条件渲染
实现方式
if/else
- 三元运算符
- 逻辑与(&&)运算符
- switch case
示例
简单情况-用三元表达式
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>
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>
如何实现呢?
笨方法
直接定义一个数组,每个元素都是一个jsx结构
const skills = [<ol>技能1:html</ol>, <ol>技能2: css</ol>, <ol>技能3: js</ol>]
const content = <ul>{skills}</ul>
ReactDOM.render(content, document.getElementById('root'))
用map
完整格式
// 完整格式
const t = skills.map(function(item) {
return <ol>技能{item.id}: {item.name}</ol>
})
const list = <ul>{t}</ul>
简写格式
const list = (
<ul>
{skills.map(item => <ol>技能{item.id}: {item.name}</ol>)}
</ul>
)
列表渲染中的key
了解key的作用
React 内部用来进行性能优化时使用的,在最终的HTML结构中是看不到的。
性能优化
例如,数据如下
const songs = [
{ id: 1, name: '痴心绝对' },
{ id: 2, name: '像我这样的人' },
{ id: 3, name: '南山南' }
{ id:4, name: 'abc'}
]
生成的dom
<ul>
<li>排名:1 - 歌名:痴心绝对</li>
<li>排名:2 - 歌名:想我这样的人</li>
<li>排名:3 - 歌名:南山南</li>
</ul>
如果添加一条数据,则视图也要随之更新,而更新的逻辑是:前三条正常保留,而重新添加第四条。