React——关于JSX

JSX的概述

为什么要学习jsx？

​ 我们在初建react项目的时候，需要使用到react.creatElement去写虚拟dom，在编写过程中太繁琐不直观，不利于开发，而jsx就是解决这个问题，可以直接写一段类似HTML的代码去代替react.creatElement编码。提高开发效率。

JSX是什么？ （react声明式UI）

JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码

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

babel，高阶语法转成低阶语法，通过使用JSX去声明元素，再转换成虚拟dom。

JSX使用步骤

**前提：**查看当前项目react版本是多少，如果是17之前，使用JSX需要额外导入React，如果是17后，不需要额外导入React。

web页面使用步骤

1. 导入react和react-dom （脚手架已配置好）

2. JSX创建react元素(虚拟DOM)

   注意：
   - 外层必须有一个根元素，没有根元素可以使用幽灵节点
   	`<>`或者``
   - 所以标签必须闭合,但标签/>
   - 语言更严谨，不能于js关键字同名
     	`class` =====> `className`
       `for`========>  `htmlFor`
   - JSX可以换行，如果JSX有多行，推荐使用`()`包裹JSX，防止自动插入分号的bug
   1
   2
   3
   4
   5
   6
   7
   8

3. reactDom渲染react元素到页面

代码示例

// 1、导入所需的2个要素
import React from 'react';
import ReactDOM from 'react-dom';
// 2、通过jsx 创建虚拟dom
const root = <div class="bgc">hello JSX</div>
// 3、通过ReactDom去渲染到pc页面上,对应public里面index.html根标签
const viewRoot = document.getElementById('root')
ReactDOM.render (root,viewRoot)
1
2
3
4
5
6
7
8

格式化react代码——prettier插件

如果使用vue、angular的时候把"editor.formatOnSave": false

// 保存时使用prettier进行格式化
"editor.formatOnSave": true,
 // 默认使用prittier作为格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 不要有分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,
1
2
3
4
5
6
7
8

配置vscode，在vscode中使用tab键可以快速生成HTML内容

// 当按tab键的时候，会自动提示
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": true,
// jsx的提示
"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}
1
2
3
4
5
6
7

JavaScript表达式和语句

JavaScript表达式：数据类型和运算符的组合（结果有值，可以console.log( 表达式 )）

	数据类型：字符串、数值、布尔值、null、undefined、object（ [] / {} ）

​	运算符：1 + 2、'abc'.split('')、['a', 'b'].join('-')

​	声明式：function fn() {}、 fn()
1
2
3
4
5

JavaScript语句：if语句、for语句、switch语句这种类型。

JSX里面使用JavaScript表达式

JSX里面只能出现表达式，不能出现语句，因为JSX类似虚拟DOM；

比如我们再vue当中使用到的插值语法{{}}

在jsx中使用表达式语法：{ JS 表达式 }

{}可以访问JSX、JSX注释（快键键 ctrl + /）、变量、对象属性obj.xxx、数组下标array[0]、三元表达式、函数调用fn()

• 比如，
  hello {type}

// 举例
const type = 'JSX'
const saying = '我正在学习'
const title = (
  <div>
    hello {type}, {saying}
  </div>
)
1
2
3
4
5
6
7
8

JSX不可以使用JavaScript语句

会报错！！

元素样式控制

行内样式 - style

• 像 width/height 等属性，可以省略 px，直接使用 数值 即可

• 百分比的单位字符串形式使用"90%"

  const showDiv = (
    
  { color: 'red', width:'200',backgroundColor: 'black' }}>
      行内样式举例
  )
  1
  2
  3
  4

行外样式 类- className （建议使用）

// 导入样式
import './total.css'
const dv = 
外部样式
1
2
3

条件渲染（如vue中v-if v-else)

• 在react中，通过javascript去控制条件渲染
• 使用if/else或三元运算符或逻辑与(&&)运算符实现条件的渲染

const isLogin = false
// if/else
const showData = () => {
  if (isLogin) {
    return <div>已登录状态，以下是您的基本信息</div>
  } else {
    return <div>当前用户未登录，自动跳转至登录界面。。。</div>
  }
}
// 三元表达式
const showData = () => {
  return isLogin ? (
    <div>已登录状态，以下是您的基本信息</div>
  ) : (
    <div>当前用户未登录，自动跳转至登录界面。。。</div>
  )
}

//逻辑运算符 
const showData = () => {
  return isLogin && <div>已登录状态，以下是您的基本信息</div>
}

const show = <div>{showData()}</div>    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

列表渲染(如v-for，结合设计模式的策略模式)

react通过数组的map方法，结合key值实现列表的渲染

关于列表渲染：

• 作用：需要重复生成相同的 HTML 结构，li、span、a等等
• 实现：使用数组的 map 方法 + key 属性（作用如vue当中v-for时必须加入的唯一key值一致）
• key必须保持唯一，不建议使用index，以下只是举例，建议使用业务当中唯一的id作为标识。

const careers = ['医生', '律师', '秃头程序员']
const list = careers.map(career => <li key={index}>{career}</li>)
const careerDiv = (
  <div>
    <ul>{list}</ul>
  </div>
)

// 直接再JSX里面处理
const careerDiv= (
  <div>
    <ul>{careers.map(career => <li key={index)>{career}</li>)}</ul>
  </div>
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14