react Jsx基础概念和本质

前端小趴菜052024-07-17 11:28

什么是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优势

HTML的声明式模板写法
js的可编程能力

jsx的本质

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

jsx中使用js表达式

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

使用引号传递字符串
使用javascript变量
函数调用和方法调用
使用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判断语句