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)

    注意:
    - 外层必须有一个根元素,没有根元素可以使用幽灵节点`<></>`或者`<React.Fragment></React.Fragment>`
    - 所以标签必须闭合,但标签/>
    - 语言更严谨,不能于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 = <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

// 保存时使用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()

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

JSX不可以使用JavaScript语句

会报错!!

元素样式控制

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

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

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

条件渲染(如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>    

列表渲染(如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>
)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/747676.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式】Java 设计模式之桥接模式(Bridge)

桥接模式&#xff08;Bridge Pattern&#xff09;深入解析 一、桥接模式概述 桥接模式是一种结构型设计模式&#xff0c;它将抽象部分与它的实现部分分离&#xff0c;使它们都可以独立地变化。桥接模式是一种非常有用的设计模式&#xff0c;在软件系统中&#xff0c;某些类型…

HNU-计算机系统-实验1-原型机vspm1.0-(二周目玩家视角)

前言 二周目玩家&#xff0c;浅试一下这次的原型机实验。总体感觉跟上一年的很相似&#xff0c;但还是有所不同。 可以比较明显地感觉到&#xff0c;这个界面越来越好看了&#xff0c;可操作与可探索的功能也越来越多了。 我们HNU的SYSTEM真的越来越好了&#xff01;&#x…

流程引擎接入设计

流程引擎接入设计 文章目录 流程引擎接入设计流程基础信息接入通用流程模型HDFS path删除工单类型工单流程图工单流程表与工单类型详细表关联关系流程基础信息 接入通用流程模型 交互过程 #mermaid-svg-UqP5icyFfibTMWRb {font-family:"trebuchet ms",verdana,aria…

JMeter 查看 TPS 数据,详细指南

TPS 是软件测试结果的测量单位。一个事务是指一个客户机向服务器发送请求然后服务器做出反应的过程。客户机在发送请求时开始计时&#xff0c;收到服务器响应后结束计时&#xff0c;以此来计算使用的时间和完成的事务个数。在 JMeter 中&#xff0c;我们可以使用以下方法查看 T…

量子遗传算法优化VMD参数,五种适应度函数任意切换,最小包络熵、样本熵、信息熵、排列熵、排列熵/互信息熵...

关于量子遗传算法&#xff0c;在众多文献均有应用。下面简述一下原理。 &#xff08;1&#xff09;量子比特编码 子遗传算法通过引入量子比特来完成基因的存储和表达。量子比特是量子信息中的概念&#xff0c;它与经典比特不同&#xff0c;是因为它可以在同一时刻处于两个状态的…

centos防火墙firewall-cmd限定特定的ip访问

文章目录 firewall-cmd是什么&#xff1f;启动firewalld服务查看默认区域关闭端口访问添加富规则firewall-cmd的区域概念firewall-cmd的常用选项通用选项&#xff1a;状态选项&#xff1a;永久选项&#xff1a;区域选项&#xff1a; firewall-cmd是什么&#xff1f; firewall-…

Kubernetes基础(二十八)-K8S调度之拓扑分布TopologySpreadConstraints

1 引言 Kubernetes&#xff08;K8s&#xff09;是一款开源的容器编排平台&#xff0c;其调度系统能够智能地将容器化应用程序部署到集群中的节点。在分布式系统中&#xff0c;节点的负载均衡是至关重要的&#xff0c;而TopologySpreadConstraints&#xff08;拓扑分散约束&…

Unreal发布Android App如何面对混乱的Android SDK开发环境

Unreal发布Android App如何面对混乱的Android SDK开发环境 混乱的Android SDK开发环境Unreal 4可以借用Unity3D安装的Android环境Unreal 5需要安装Android Studio开发环境Android Studio的DK版本目录处理gradle和java版本gradle提示错误总结 混乱的Android SDK开发环境 Unreal…

2024年能源、自动化与电气工程国际会议(ICEAEE 2024)

2024年能源、自动化与电气工程国际会议&#xff08;ICEAEE 2024&#xff09; 2024 International Conference on Energy, Automation and Electrical Engineering 会议简介&#xff1a; 电气工程与自动化技术是能源自动化的重要组成部分&#xff0c;主要涉及电能的生成、传输…

流式数据湖平台实战 | 在Flink DataStream API中集成和使用Hudi

1.Flink Datastream API中使用Hudi 添加相应版本的maven依赖 <!-- Flink 1.13 --> <dependency><groupId>org.apache.hudi</groupId><artifactId>hudi-flink1.13-bundle</artifactId><version>0.14.0</version> </depend…

SpringMVC基础之简单程序应用

文章目录 SpringMVC 简单应用程序1. 配置2. 创建 Controller 类3. 配置控制器映射信息4. 创建视图 SpringMVC 简单应用程序 Spring MVC 是 Spring 提供的一个实现了 Web MVC 设计模式的轻量级 Web 框架。它与 Struts 2 框架一样&#xff0c;都属于 MVC 框架&#xff0c;但其使…

Python爬虫 Day1

要注意看网页的请求方式是request还是get 一、小型爬虫 &#xff08;爬百度首页&#xff09; from urllib.request import urlopen url "https://www.baidu.com" resp urlopen(url) print(resp.read().decode(utf-8)) print("over!") //&#xff01;&am…

【Hadoop】Hadoop概述与核心组件

目录 Hadoop概述Hadoop 发展历史Hadoop 三大发行版本1.Apache Hadoop&#xff08;常用&#xff09;2.Cloudera Hadoop3.Hortonworks Hadoop优势优势总结——4高&#xff08;高可靠、高扩展、高效、高容错&#xff09; Hadoop组成1.HDFS管理者&#xff1a;NameNode&#xff08;n…

css3 实现html样式蛇形布局

文章目录 1. 实现效果2. 实现代码 1. 实现效果 2. 实现代码 <template><div class"body"><div class"title">CSS3实现蛇形布局</div><div class"list"><div class"item" v-for"(item, index) …

pyflink1.18.0 报错 TypeError: cannot pickle ‘_thread.lock‘ object

完整报错 Traceback (most recent call last):File "/Users//1.py", line 851, in <module>ds1 = my_datastream.key_by(lambda x: x[0]).process(MyProcessFunction()) # 返回元组即: f0 f1 f2 三列File "/Users/thomas990p/bigdataSoft/minicondaarm/…

【测试知识】业务面试问答突击版2-----测试计划、上线、性能测试、web端移动端

文章目录 灰度发布&#xff0c;作用是&#xff1f;测试计划中测试开始条件一般包括哪些内容测试计划中的测试结束条件一般包含哪些内容测试人员是否需要代码能力&#xff0c;应用在哪些方面测试人员参与代码审核&#xff0c;重点关注什么产品上线后发现问题&#xff0c;如何产品…

音视频如何快速转二维码?在线生成音视频活码的教程

音频文件的二维码制作步骤是什么样的呢&#xff1f;扫描二维码来展现内容是很流行的一种方式&#xff0c;基本上日常生活中经常会用的图片、音频、视频等都可以使用生成二维码的方式。现在很多的幼儿园或者学校会录制孩子的音频或者视频内容用来展示&#xff0c;那么二维码制作…

鸿蒙开发实战:【音频组件】

简介 音频组件用于实现音频相关的功能&#xff0c;包括音频播放&#xff0c;录制&#xff0c;音量管理和设备管理。 图 1 音频组件架构图 基本概念 采样 采样是指将连续时域上的模拟信号按照一定的时间间隔采样&#xff0c;获取到离散时域上离散信号的过程。 采样率 采样…

Hystrix的原理及应用:构建微服务容错体系的利器(二)

本系列文章简介&#xff1a; 本系列文章旨在深入剖析Hystrix的原理及应用&#xff0c;帮助大家理解其如何在微服务容错体系中发挥关键作用。我们将从Hystrix的核心原理出发&#xff0c;探讨其隔离、熔断、降级等机制的实现原理&#xff1b;接着&#xff0c;我们将结合实际应用场…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:RelativeContainer)

相对布局组件&#xff0c;用于复杂场景中元素对齐的布局。 说明&#xff1a; 该组件从API Version 9开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 规则说明 容器内子组件区分水平方向&#xff0c;垂直方向&#xff1a; 水平方向为left&…