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

相关推荐
yuanmenglxb20042 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼2 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_09277 分钟前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸8 分钟前
一文带你使用Vue完成移动端(apk)项目
前端
会飞的鱼先生20 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了20 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风26 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风27 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺1 小时前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺1 小时前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试