React-JSX基础

什么是JSX

概念:JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模板结构,它是React中编写UI模板的方式

优势:1.HTML的声明式模板写法 2.JS的可编程能力

JSX的本质

JSX并不是标准的JS语法,它是JS的语法拓展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器中运行

编译网站:Babel · Babel

点击右上角的"Try it out"

要把最左侧的react勾选上,左侧填写JSX代码,右侧就是浏览器编译后的代码

高频场景

JSX中使用JS表达式

在JSX中可以通过大括号语法{}识别Javascript中的表达式,比如常见的变量、函数调用、方法调用等等

1.使用引号传递字符串

复制代码
{字符串}

2.使用JavaScript变量

复制代码
{JS变量名}

3.函数调用和方法调用

复制代码
{函数名()}

4.使用JavaScript对象

注意:if语句、switch语句、变量声明属于语句,不是表达式,不能出现在{}中

JSX中实现列表渲染

语法:在JSX中可以使用原生JS中的map方法遍历渲染列表

注意事项:加上一个独一无二的key值(类型可以是字符串或者number)

key的作用:React框架内部使用,提升更新性能

JSX中实现条件渲染

语法:在React中,可以通过逻辑与运算符&&、三元表达式(?:)实现基础的条件渲染

JSX中实现复杂条件渲染

自定义函数+if判断语句来实现复杂条件的渲染

相关推荐
爱泡脚的鸡腿1 分钟前
HTML CSS 第二次笔记
前端·css
灯火不休ᝰ17 分钟前
前端处理pdf文件流,展示pdf
前端·pdf
智践行19 分钟前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态24 分钟前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb6634 分钟前
框架修改思路
前端·javascript·vue.js
树上有只程序猿36 分钟前
Java程序员需要掌握的技术
前端
从零开始学安卓39 分钟前
Kotlin(三) 协程
前端
阿镇吃橙子43 分钟前
一些手写及业务场景处理问题汇总
前端·算法·面试
庸俗今天不摸鱼43 分钟前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化