react Jsx基础概念和本质

什么是jsx

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

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对象

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