React框架学习文档（三）

四、UI层面

4.1 JSX基础

[4.1 JSX基础](#4.1 JSX基础)

[4.1.1 定义](#4.1.1 定义)

[4.1.2 基础语法](#4.1.2 基础语法)

[4.1.2.1 标签类型](#4.1.2.1 标签类型)

[4.1.2.2 JavaScript表达式](#4.1.2.2 JavaScript表达式)

变量渲染：直接显示变量值

函数调用：执行JavaScript函数

表达式计算：直接计算结果

[4.1.2.3 标签属性](#4.1.2.3 标签属性)

字符串值：用引号包起来

JavaScript值：用大括号包起来(JS对象)

[class → className（因为class是JavaScript保留字）](#class → className（因为class是JavaScript保留字）)

[for → htmlFor（同样原因）](#for → htmlFor（同样原因）)

事件属性：onClick、onChange等

[4.1.2.4 注释](#4.1.2.4 注释)

[4.1.2.5 数组](#4.1.2.5 数组)

核心概念

关键：必须给每个元素加key属性

实际应用场景

[4.1.3 记忆技巧](#4.1.3 记忆技巧)

4.1.1 定义

JSX就像给HTML穿了件JavaScript的外套，让你在写网页时能直接用JavaScript的能力。

它不是真正的HTML，也不是JavaScrpt，而是JavaScript的语法扩展，需要通过Babel这样的工具翻译成浏览器能懂的代码。

简单说，JSX就是带JS功能的HTM,能直接用JavaScript变量和函数。

4.1.2 基础语法

4.1.2.1 标签类型

DOM类型标签：首字母必须小写，就像HTML原生标签

javascript 复制代码

{/* 正确：像普通HTML标签 */}

<div className="container">

  <h1>欢迎</h1>

  <p>这是普通DOM标签</p>

</div>

React组件类型标签：首字母必须大写，就像你自定义的组件

javascript 复制代码

{/* 正确：自定义组件首字母大写 */}

<WelcomeMessage />

<UserProfile name="小明" />

错误示范：

javascript 复制代码

{/* 错误：小写自定义组件 */}

<welcomeMessage /> {/* React会认为是HTML标签，找不到会报错 */}

4.1.2.2 JavaScript表达式

核心概念： {}可以把JavaScript代码写进去

变量渲染：直接显示变量值

javascript 复制代码

const userName = "小明";

const age = 18;

{/* 直接显示变量 */}

<div>用户名：{userName}</div>

<div>年龄：{age}</div>

函数调用：执行JavaScript函数

javascript 复制代码

function getGreeting() {

  return "你好，欢迎回来！";

}

{/* 调用函数显示结果 */}

<div>{getGreeting}</div>

{/* 另一种写法*/}

{/* <div>{( )=> getGreeting( )}</div> */}

表达式计算：直接计算结果

javascript 复制代码

{/* 直接计算并显示 */}

<div>1 + 1 = {1 + 1}</div>

<div>当前时间：{new Date().toLocaleTimeString()}</div>

注意要点：

只能放"表达式"（有返回值的代码）
不能放"语句"（没有返回值的代码）,不能写if、for等多行语句
但可以用三元运算符（?:）和逻辑与（&&）替代

错误示范：

javascript 复制代码

{/* 错误：不能写if语句 */}

{if (true) { return "正确"; }} {/* ❌ 错误 */}

{/* 正确：用三元运算符替代 */}

{true ? "正确" : "错误"} {/* ✅ 正确 */}

4.1.2.3 标签属性

字符串值：用引号包起来

javascript 复制代码

{/* 字符串属性 */}

<div className="container" id="main">

  <button disabled="true">禁用按钮</button>

</div>

JavaScript值：用大括号包起来(JS对象)

javascript 复制代码

{/* JavaScript表达式作为属性值 */}

<div style={{ color: 'red', fontSize: '16px' }}>

  红色文字

</div>

{/* 变量作为属性值 */}

const buttonColor = "blue";

<button style={{ backgroundColor: buttonColor }}>蓝色按钮</button>

class → className（因为class是JavaScript保留字）

for → htmlFor（同样原因）

事件属性：onClick、onChange等

错误示范：

javascript 复制代码

{/* 错误：不能混用引号和大括号 */}

<div style="color: {red}"> {/* ❌ 错误 */}

{/* 正确 */}

<div style={{ color: 'red' }}> {/* ✅ 正确 */}

4.1.2.4 注释

用大括号包起来的单行或多行注释

javascript 复制代码

{/*

  这是一个多行注释

  不会在页面上显示

  只给开发者看

*/}

<div>

  {/* 单行注释：这里显示用户信息 */}

  <UserInfo user={currentUser} />

</div>

4.1.2.5 数组

核心概念

当你把数组放进JSX表达式里，React会自动把数组里的每个元素都显示出来，就像把盒子里的东西一个个拿出来展示。

关键：必须给每个元素加key属性

（1）为什么需要key？

想象一下，如果你有一排人，每个人都戴着编号牌（key），当有人离开或新来时，你可以快速知道谁是谁，不用重新认识所有人。

（2）key的作用：

帮助React识别每个元素的身份

提高渲染效率，只更新变化的部分

避免状态混乱

（3）正确的key用法

javascript 复制代码

// 使用数据中的唯一ID

const users = [

  { id: 1, name: "小明" },

  { id: 2, name: "小红" },

  { id: 3, name: "小刚" }

];

<ul>

  {users.map(user => (

    <li key={user.id}>{user.name}</li>

  ))}

</ul>

（4）错误示范：不要用索引作为key

javascript 复制代码

// ❌ 错误：使用索引作为key

{fruits.map((fruit, index) => (

  <li key={index}>{fruit}</li>

))}

// 问题：当数组顺序改变时，React会错误地认为元素没有变化

// 比如删除第一个元素，React可能只是移动了第二个元素的key，而不是重新创建

实际应用场景

商品列表
用户信息展示
菜单导航
任何需要重复显示相同结构的场景

4.1.3 记忆技巧

标签大小写：小写是HTML，大写是自定义组件
表达式口袋：{}装表达式，不能装语句
属性规则：字符串用引号，JS用大括号
数组魔法：map自动展开，记得加key
注释方法：{/* 注释内容 */}