React JSX 知识点汇总
写给编程小白的JSX完全指南
最后更新：2023年10月15日
JSX是什么？
大白话解释
JSX是JavaScript的语法扩展，它让你能在JavaScript代码中编写类似HTML的标签。
简单说： JSX = JavaScript + XML(HTML)，让你在JS中写HTML
为什么使用JSX？
1. 直观：将UI和逻辑放在一起更易于理解
2. 高效：React配合JSX能高效更新DOM
3. 安全：React会默认防范XSS攻击
// 没有JSX的写法
const element = React.createElement(‘h1’, null, ‘Hello, world!’);
// 使用JSX的写法
const element = <h1>Hello, world!</h1>;
const element = React.createElement(‘h1’, null, ‘Hello, world!’);
// 使用JSX的写法
const element = <h1>Hello, world!</h1>;
JSX基本语法规则
1. 必须有一个根元素
组件返回的JSX必须有一个父元素包裹
// ❌ 错误写法：多个顶层元素
return (
<h1>标题</h1>
<p>内容</p>
);
// ✅ 正确写法：单个根元素
return (
<div>
<h1>标题</h1>
<p>内容</p>
</div>
);
return (
<h1>标题</h1>
<p>内容</p>
);
// ✅ 正确写法：单个根元素
return (
<div>
<h1>标题</h1>
<p>内容</p>
</div>
);
2. 标签必须闭合
所有标签都必须有结束标签
// ❌ 错误写法：标签未闭合
<img src=”…”>
// ✅ 正确写法
<img src=”…” />
<div></div>
<img src=”…”>
// ✅ 正确写法
<img src=”…” />
<div></div>
3. 关键词处理
JavaScript关键词在JSX中有特殊写法：
– class 改为 className
– for 改为 htmlFor
在JSX中嵌入表达式
使用大括号 { }
在JSX中，你可以使用大括号嵌入任何有效的JavaScript表达式
const name = “小明”;
const age = 20;
// 在JSX中使用变量
<h1>你好, {name}!</h1>
// 执行计算
<p>明年你就 {age + 1} 岁了</p>
// 调用函数
<div>当前时间：{new Date().toLocaleTimeString()}</div>
const age = 20;
// 在JSX中使用变量
<h1>你好, {name}!</h1>
// 执行计算
<p>明年你就 {age + 1} 岁了</p>
// 调用函数
<div>当前时间：{new Date().toLocaleTimeString()}</div>
注意：不能在JSX中使用常规的if语句或for循环，但可以使用三元表达式或map方法
JSX本身也是表达式
JSX可以赋值给变量、作为函数参数或返回值
// 赋值给变量
const greeting = <h1>Hello!</h1>;
// 作为函数返回值
function getWelcome(user) {
if (user) {
return <h1>欢迎回来, {user.name}!</h1>;
}
return <h1>请先登录</h1>;
}
const greeting = <h1>Hello!</h1>;
// 作为函数返回值
function getWelcome(user) {
if (user) {
return <h1>欢迎回来, {user.name}!</h1>;
}
return <h1>请先登录</h1>;
}
条件渲染
1. 使用三元运算符
简单条件判断推荐此法
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? (
<LogoutButton />
) : (
<LoginButton />
)}
</div>
);
return (
<div>
{isLoggedIn ? (
<LogoutButton />
) : (
<LoginButton />
)}
</div>
);
2. 使用逻辑与运算符
适用于只需要在条件为真时渲染内容
const unreadMessages = [‘消息1’, ‘消息2’];
return (
<div>
{unreadMessages.length > 0 && (
<h2>
您有 {unreadMessages.length} 条未读消息
</h2>
)}
</div>
);
return (
<div>
{unreadMessages.length > 0 && (
<h2>
您有 {unreadMessages.length} 条未读消息
</h2>
)}
</div>
);
列表渲染
使用map()方法
将数组转换为JSX元素列表
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return <ul>{listItems}</ul>;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return <ul>{listItems}</ul>;
key的重要性
key帮助React识别哪些元素改变了
最佳实践：
– 使用数据中的唯一ID
– 万不得已才使用索引
为什么需要key？ React使用key来识别列表中的元素变化，提高渲染效率
事件处理
绑定事件
使用驼峰命名法绑定事件处理函数
function handleClick() {
alert(‘按钮被点击了!’);
}
// JSX中绑定事件
<button onClick={handleClick}>
点击我
</button>
alert(‘按钮被点击了!’);
}
// JSX中绑定事件
<button onClick={handleClick}>
点击我
</button>
传递参数
使用箭头函数或bind方法传递额外参数
// 使用箭头函数
<button onClick={(e) => deleteRow(id, e)}>
删除行
</button>
// 使用bind方法
<button onClick={deleteRow.bind(this, id)}>
删除行
</button>
<button onClick={(e) => deleteRow(id, e)}>
删除行
</button>
// 使用bind方法
<button onClick={deleteRow.bind(this, id)}>
删除行
</button>
注意： 在JSX中，事件处理函数的参数是React封装过的合成事件(SyntheticEvent)
JSX在React开发者中的使用率
超过90%的React项目使用JSX
JSX的优势对比
百分比越高表示优势越大
JSX常见错误比例
初学者常见错误分布
JSX实际应用示例
用户信息卡片组件
function UserCard({ user }) {
return (
<div className=”user-card”>
<img src={user.avatarUrl} alt={user.name} />
<h2>{user.name}</h2>
<p>邮箱: {user.email}</p>
{user.isAdmin && <span className=”admin-badge”>管理员</span>}
<button onClick={() => sendMessage(user.id)}>
发送消息
</button>
</div>
);
}
return (
<div className=”user-card”>
<img src={user.avatarUrl} alt={user.name} />
<h2>{user.name}</h2>
<p>邮箱: {user.email}</p>
{user.isAdmin && <span className=”admin-badge”>管理员</span>}
<button onClick={() => sendMessage(user.id)}>
发送消息
</button>
</div>
);
}
这个示例展示了如何在一个组件中组合使用：
– 属性传递
– 条件渲染(管理员标记)
– 事件处理(发送消息)
– 嵌入表达式(用户名、邮箱)
– 属性传递
– 条件渲染(管理员标记)
– 事件处理(发送消息)
– 嵌入表达式(用户名、邮箱)