React——关于JSX

JSX的概述

为什么要学习jsx?

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

JSX是什么? (react声明式UI)

JSXJavaScript XML的简写,表示了在Javascript代码中写XML(HTML)格式的代码

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

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

JSX使用步骤

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

web页面使用步骤

  1. 导入reactreact-dom (脚手架已配置好)

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

    jsx 复制代码
    注意:
    - 外层必须有一个根元素,没有根元素可以使用幽灵节点
    	`<></>`或者`<React.Fragment></React.Fragment>`
    - 所以标签必须闭合,但标签/>
    - 语言更严谨,不能于js关键字同名
      	`class` =====> `className`
        `for`========>  `htmlFor`
    - JSX可以换行,如果JSX有多行,推荐使用`()`包裹JSX,防止自动插入分号的bug
  3. reactDom渲染react元素到页面

代码示例

js 复制代码
// 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)

格式化react代码------prettier插件

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

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

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

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

JavaScript表达式和语句

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

jsx 复制代码
	数据类型:字符串、数值、布尔值、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()

  • 比如,<div>hello {type}</div>
js 复制代码
// 举例
const type = 'JSX'
const saying = '我正在学习'
const title = (
  <div>
    hello {type}, {saying}
  </div>
)

JSX不可以使用JavaScript语句

会报错!!

元素样式控制

行内样式 - style
  • 像 width/height 等属性,可以省略 px ,直接使用 数值 即可

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

    jsx 复制代码
    const showDiv = (
      <div style={{ color: 'red', width:'200',backgroundColor: 'black' }}>
        行内样式举例</div>
    )
行外样式 类- className (建议使用)
jsx 复制代码
// 导入样式
import './total.css'
const dv = <div className="bgc">外部样式</div>

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

  • 在react中,通过javascript去控制条件渲染
  • 使用if/else三元运算符逻辑与(&&)运算符实现条件的渲染
js 复制代码
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>    

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

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

关于列表渲染

  • 作用:需要重复生成相同的 HTML 结构,li、span、a等等
  • 实现:使用数组的 map 方法 + key 属性(作用如vue当中v-for时必须加入的唯一key值一致)
  • key必须保持唯一,不建议使用index,以下只是举例,建议使用业务当中唯一的id作为标识。
js 复制代码
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>
)
相关推荐
10年前端老司机1 小时前
什么!纯前端也能识别图片中的文案、还支持100多个国家的语言
前端·javascript·vue.js
摸鱼仙人~1 小时前
React 性能优化实战指南:从理论到实践的完整攻略
前端·react.js·性能优化
程序员阿超的博客2 小时前
React动态渲染:如何用map循环渲染一个列表(List)
前端·react.js·前端框架
magic 2452 小时前
模拟 AJAX 提交 form 表单及请求头设置详解
前端·javascript·ajax
小小小小宇7 小时前
前端 Service Worker
前端
只喜欢赚钱的棉花没有糖7 小时前
http的缓存问题
前端·javascript·http
小小小小宇8 小时前
请求竞态问题统一封装
前端
loriloy8 小时前
前端资源帖
前端
源码超级联盟8 小时前
display的block和inline-block有什么区别
前端
GISer_Jing8 小时前
前端构建工具(Webpack\Vite\esbuild\Rspack)拆包能力深度解析
前端·webpack·node.js