react Jsx基础概念和本质

什么是jsx

jsx是JavaScript和XML(HTML)的缩写,表示在js代码中编写HTML模板结构,它是react中编写UI模板的方式

javascript 复制代码
const message = 'this is message'
function App(){
	return (
		<div>
			<h1>this is title</h1>
			{message}
		</div>
	)
}

jsx优势

  1. HTML的声明式模板写法

  2. js的可编程能力

jsx的本质

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

jsx中使用js表达式

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

  1. 使用引号传递字符串

  2. 使用javascript变量

  3. 函数调用和方法调用

  4. 使用javascript对象

javascript 复制代码
const name = '张三'
function age(){
  return 18
}
function App() {
  return (
    <div className="App">
     111
     {/* 1. 使用引号传递字符串 */}
     {'传递字符串'}
    {/* 2. 使用javascript变量 */}
    {name}
    {/* 3. 函数调用和方法调用 */}
    {/* 函数调用 */}
    {age()}
    {/* 方法调用 */}
    {new Date().toLocaleString()}
    {/* 4. 使用javascript对象 一般用于设置style */}
    <div style={{color:'red'}}>使用javascript对象</div>
    </div>
  );
}

export default App;

jsx实现列表渲染

需要使用原生js的map方法实现

jsx实现条件渲染

jsx实现复杂条件渲染

解决方案:自定义函数+if判断语句

相关推荐
GIS之路20 小时前
GDAL 读取遥感影像数据
前端
IT_陈寒21 小时前
Spring Boot 3.2 新特性全解析:这5个性能优化点让你的应用提速50%!
前端·人工智能·后端
携欢21 小时前
PortSwigger靶场之Stored DOM XSS通关秘籍
前端·xss
LDM>W<21 小时前
Electron下载失败
前端·javascript·electron
EndingCoder21 小时前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
BillKu21 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
子兮曰1 天前
🔥深度解析:Nginx目录浏览美化与功能增强实战指南
前端·javascript·nginx
machinecat1 天前
node,小程序合成音频的方式
前端·node.js
我是日安1 天前
从零到一打造 Vue3 响应式系统 Day 4 - 核心概念:收集依赖、触发更新
前端·vue.js
跟橙姐学代码1 天前
不要再用 print() 了!Python logging 库才是调试的终极武器
前端·python