JSX语法
1.jsx的作用
react的作用:监听数据更新,帮助我们去渲染视图
render()函数实现了DOM的渲染的过程,这个过程我们可以分为两个阶段:
- 获取虚拟DOM(JSX经过babel转译后的对象就是虚拟DOM)
- 将虚拟DOM转化成真实DOM,并插入到HTML文档中
JSX javascript xml (xml 一般指的就是可扩展标记语言)
jsx是react提供的语法糖(syntax sugar),能让我们在JS中去写HTML,在React中它的作用是描述UI,可以把它理解为虚拟DOM
2.jsx的基本语法
- JSX只能有一个根标签
return (
<div>
<h1>Title</h1>
<p>Content</p>
</div>
);
// 或使用 Fragment(不添加额外 DOM 节点)
return (
<>
<h1>Title</h1>
<p>Content</p>
</>
);
- 不需要使用引号包裹
- {/**/} 注释
- {this.state.name} 插值表达式
- jsx中可以是单标签,也可以是双标签,单标签必须闭合
- 驼峰命名(camelCase):HTML 属性名需转换为驼峰形式。
- class → className
- for → htmlFor
- tabindex → tabIndex
- 列表渲染
使用数组的 map() 方法动态生成元素列表,必须为每个元素指定唯一 key 属性。
const users = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }];
const userList = (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
jsx 中 null undefined boolean 不能被渲染的,如果需要显示,需要转换字符串
jsx中可以插入表达式,但是不可以插入语句
表达式最终会有返回值
绑定class className
要绑定style 在 {} 传入一个对象
jsx的本质其实就是React.createElement的语法糖
{/*单行注释*/}
{/*
多行注释
多行注释
*/}
{/*插值表达式*/}
<h1>{this.state.name}</h1>
{/*数据渲染*/}
// null undefined boolean 不能被渲染的,如果需要显示,需要转换字符串
test: null,
// 对象不能直接在jsx直接渲染,可以转换成字符串或者是直接调用
<h1>{this.state.test+''}</h1>
<h1>{this.state.message.toString()}</h1>
{/*三元表达式*/}
<h1>{this.state.status ? '已登录' : '未登录'}</h1>
{/*jsx中不能写if语句*/}
{/*绑定属性*/}
{/*单标签必须要闭合*/}
<img src={img} alt="" />
<a href={url}>百度一下,你就知道</a>
{/*绑定class jsx 不是html class className*/}
<div className="div1">
我是div1
</div>
{/*要绑定style 在 {} 传入一个对象*/}
<div style={ {color:'red',fontSize:'20px'} }>我也是div</div>
{/* 或者*/}
const style = { backgroundColor: "blue", padding: "10px" };
<div style={style}>Styled Box</div>
JSX是React框架中用于描述UI的语法糖,它允许开发者在JavaScript中书写类似HTML的代码。JSX通过babel转译后生成虚拟DOM,进而实现DOM的高效更新。文中详细介绍了JSX的基本语法,包括单双标签的使用、插值表达式、注释、数据渲染以及属性绑定规则,特别强调了null、undefined和boolean在JSX中的处理方式。

被折叠的 条评论
为什么被折叠?



