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
   

3. reactDom渲染react元素到页面

代码示例

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

格式化react代码——prettier插件

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

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

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

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

JavaScript表达式和语句

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

	数据类型：字符串、数值、布尔值、null、undefined、object（ [] / {} ）
​	运算符：1 + 2、'abc'.split('')、['a', 'b'].join('-')
​	声明式：function fn() {}、 fn()

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 = (
    
  
      hello {type}, {saying}
    
  )
  

  JSX不可以使用JavaScript语句

  会报错！！

  元素样式控制

  行内样式 - style

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

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

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

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

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

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

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

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

      列表渲染(如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 => index}{career}

      ) const careerDiv = (
      {list}
      ) // 直接再JSX里面处理 const careerDiv= (
      {careers.map(career => index){career})}
      )