react中 JSX介绍-基本使用

JSX是什么

JSX：是 JavaScript XML的缩写。

• 在 JS 代码中书写 XML 结构

  • 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。

• React用它来创建 UI（HTML）结构

jsx示例

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// jsx创建元素
const list = 
html
js
css


// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

优势

• 采用类似于 HTML 的语法，降低了学习成本，会 HTML 就会 JSX

• 充分利用 JS 自身的能力来创建 HTML 结构。比如，利用 JS 数组的 map 方法创建列表结构

JSX是如何工作的？

babel在线使用

jsx ---babel---> React.createELement  

 

 

JSX的注意事项

内容

1. jsx必须要有一个根节点

2. 属性名不能用js中的关键字。例如class, for

3. 单标签要闭合

4. 换行建议使用()包裹

5. 老版本(16.8)先引入react才能使用jsx

jsx必须要有一个根节点

格式1：<> xxx

import ReactDOM from 'react-dom'

const title = <> 
Hello React
p标签
 

ReactDOM.render(title, document.querySelector('#root'))

 格式2： xxx

import ReactDOM from 'react-dom'

const title =  
Hello React
p标签
 >

ReactDOM.render(title, document.querySelector('#root'))

属性名不能用js中的关键字

例如class, for

• class -> className

• for ->htmlFor

单标签要闭合

• --->

老版本(16.8)先引入react才能使用jsx

理解引入react的作用（提供createElement的功能）

老版本中不引入就会报错React must be in scope when using JSX

换行建议使用()包裹

const content = (
	

  	
xxx
  
)

JSX-嵌入表达式

嵌入表达式的格式

{ JS 表达式 }

例如：

import ReactDOM from 'react-dom'

const num = Math.random()
const title = (

               		随机值：{ num }
               
)

ReactDOM.render(title, document.querySelector('#root'))

大括号是一种特殊的语法，让 JSX 解析器知道它需要将它们之间的内容解释为 JavaScript代码 而不是字符串

作用：执行{}内部的代码，并输出结果。

嵌入表达式的位置

1 属性值  

const logo = 'https://create-react-app.dev/img/logo.svg'

 2 内容

const name = '小芳'
{name}

单花括号中可以写什么？

可以写

1. 表达式

   定义：数据类型和运算符的组合（可以单独出现数据类型，也可以数据类型+运算符的组合）

   特点：有值（或者能够计算出一个值）； 能被console.log()

2. 其他的jsx表达式

3. 注释

不可以写

1. 对象

2. js语句：if 语句/ switch-case 语句/ 变量声明语句

示例

import React from 'react'
import ReactDOM from 'react-dom'

const girl = {
  name: '小芳',
  age: 19,
  logo: 'https://create-react-app.dev/img/logo.svg',
  skills: ['唱歌', '收稻子']
}

const f1 = () => {
  return {girl.skills.join(',')}
}
const baseInfo = (
  

    姓名: {girl.name}
    妙龄: {girl.age}
  
)

const content = (
  

    
jsx-表达式

    {/* 1. {} 可以用在内容上 */}

    {/* {}可以包其他的jsx */}
    {baseInfo}

    {/* {}可以包表达式 */}
    
爱好:{girl.skills}
    
字符串:{'abc'}
    
字符串:{'{'}
    
数组:{[1, 2, 3]}
    
数值:{100}
    
函数：{f1()}
    
算数表达式：100/2={100 / 2}
    

      三元表达式：{girl.age < 28 ? '芳龄' : '年龄'} {girl.age}
    

    {/* 2. {}可以用在属性值上 */}
    
类名组合
    

    {/*
    下面是错误的示范
    不能输出对象，不能使用语句
    
{{ a: 1 }}
    
{var a =1 }
 */}
  
)
ReactDOM.render(content, document.getElementById('root'))

JSX-条件渲染

实现方式

• if/else

• 三元运算符

• 逻辑与(&&)运算符

简单情况-用三元表达式

const flag = 0
const content = (
{flag ? '达成' : '没有达成'}
)

 简单情况-用逻辑与

const isLogin = true
const content = (
{ isLogin && '您登录了'}
)

复杂情况-使用额外的函数

const loadData = (isLoading) => {
  if (isLoading) {
    return 
数据加载中，请稍后...
 
  } else {
    return 
数据加载完成，此处显示加载后的数据
  }
}
const content = 
{loadData(true)}

JSX-列表渲染

从后端取回来的数据保存在数组中，需要用列表展示。这里的数组如下：

const skills = [
  { id: 1, name: 'html' }, 
  { id: 2, name: 'css' }, 
  { id: 3, name: 'js' }
]

我们要生成的dom结构如下：

  
技能1：html
  
技能2：css
  
技能3：js

笨方法

直接定义一个数组，每个元素都是一个jsx结构

const skills = [
技能1:html
, 
技能2: css
, 
技能3: js
]

const content = 
{skills}

ReactDOM.render(content, document.getElementById('root'))

用map

// 完整格式
const t = skills.map(function(item) {
  return 
技能{item.id}: {item.name}
})

const list = 
{t}

const list = (  
    
    
        {skills.map(item => 
技能{item.id}: {item.name}
)}  
    
)

列表渲染中的key

React 内部用来进行性能优化时使用的，在最终的HTML结构中是看不到的。

性能优化

例如，数据如下

const songs = [
  { id: 1, name: '痴心绝对' }, 
  { id: 2, name: '像我这样的人' }, 
  { id: 3, name: '南山南' }
]

 生成的dom

  
排名:1 - 歌名：痴心绝对
  
排名:2 - 歌名：想我这样的人
  
排名:3 - 歌名：南山南

如果添加一条数据，则视图也要随之更新，而更新的逻辑是：前三条正常保留，而重新添加第四条。

如何设置key

如果数据中有一个唯一的属性值，就可以使用这个属性来当做key

如果没有，就可以用索引值

JSX 样式处理

行内样式 - style

格式

要点：

1. 为啥有两个{{ }}

   1. 外层的{}表示 要开始写js了

   2. 内层的{}表示是一个对象

2. 属性名是小驼峰格式 (background-color ===> backgroundColor)

3. 属性值是字符串, 如果单位是px，可以简写数值

使用 className

要点

• 用className（不是class）定义类名

• 把样式写在额外的.css文件中，然后引入.css文件

import './index.css'

// 类名

  我是黑底红字的h1

 补充建立.css

.title{
  color: red;
  width: 200px;
  background-color: black;
}

小结

jsx中的样式：

• 行内： style={{对象，小驼峰}}

• 外部： className

JSX 整体总结

• React 使用 JSX 来编写 UI（HTML）

• React 完全利用 JS 语言自身的能力来增强 UI 的编写 - 能用 JS 来实现的功能绝不会增加一个新的 API

• 现在，就可以使用 React 来编写任意 UI 结构了