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判断语句

相关推荐
中微子几秒前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao17 分钟前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿28722 分钟前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
做梦都在学习前端29 分钟前
发布一个monaco-editor 汉化包
前端·npm·vite
石小石Orz1 小时前
为什么推荐前端学习油猴脚本开发?
前端
珵煜ini1 小时前
wd-button组件阻止事件冒泡的
前端
炒毛豆1 小时前
vue3.4中的v-model的用法~
前端·vue.js
用户40812812003811 小时前
大文件分片上传和断点续传
前端
极客悟道1 小时前
颠覆传统虚拟化:在Docker容器中运行Windows系统的开源黑科技
前端·后端
前端康师傅1 小时前
JavaScript 中你不知道的按位运算
前端·javascript