type
status
date
slug
summary
tags
category
icon
password
JSX基础
概念与本质
概念：JSX是JavaScript和XML(HTML)的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模板的方法
本质： JSX并不是标准的Js语法，是Js的扩展语法，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行
识别js表达式
在JSX中使用 大括号语法{} 识别JavaScript中的表达式，比如常见的变量，函数调用，方法调用等
- 使用引号传递字符串
- 使用JavaScript变量
- 函数调用和方法调用
- 使用JavaScript对象
注意：if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中
实现列表渲染
在JSX中可以使用原生JS中的
map 方法遍历渲染列表， 注意，遍历时每一项都需要加上独一无二的 key 作为唯一标识，类似于vue中v-for 的 keykey的作用：React框架内部使用，提升更新性能
条件渲染
基础条件渲染
在React中，可以通过 逻辑与运算符&&、三元表达式（？：） 实现基础的条件渲染
{flag && <span>this is span</span>}{loading ? <span>loading...</span> : <span>this is span</span>}复杂条件渲染
可以使用定义核心函数来根据不同的值返回JSX模板
Relate Posts