1. 什么是 JSXJSXJavaScript XML是一种 JavaScript 的语法扩展它允许我们在 JavaScript 代码中编写类似 HTML 的结构。虽然它看起来像 HTML但 JSX 在编译时会被转换为普通的 JavaScript 函数调用通常是React.createElement()。JSX 的核心思想是将 UI 的表示逻辑和渲染逻辑通过声明式的方式结合在一起而不是将它们分离到不同的文件中。这种“关注点分离”的新思路让组件成为了 UI 的独立、可复用的单元。2. JSX 的基本语法2.1 嵌入表达式在 JSX 中你可以通过花括号{}嵌入任何有效的 JavaScript 表达式。const name React; const element h1Hello, {name}!/h1; // 也可以调用函数 function formatName(user) { return user.firstName user.lastName; } const user { firstName: John, lastName: Doe }; const element2 h1Hello, {formatName(user)}!/h1;2.2 指定属性你可以使用引号来将属性值指定为字符串字面量也可以使用花括号在属性值中插入一个 JavaScript 表达式。// 字符串字面量 const element1 div tabIndex0/div; // JavaScript 表达式 const element2 img src{user.avatarUrl} /; // 注意由于 JSX 语法上更接近 JavaScript 而不是 HTML所以 React DOM 使用 camelCase小驼峰命名来定义属性的名称而不使用 HTML 属性名称的命名约定。 // 例如JSX 里的 class 变成了 className而 tabindex 则变为 tabIndex。 const element3 div classNamecontainer tabIndex{-1}/div;2.3 子元素如果一个标签里面没有内容你可以使用/来闭合标签就像 XML/HTML 一样。JSX 标签里能够包含很多子元素。const element ( div h1Hello!/h1 h2Good to see you here./h2 /div );3. JSX 防止注入攻击React DOM 在渲染所有输入内容之前默认会进行转义。它可以确保在你的应用中永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS跨站脚本攻击。const title response.potentiallyMaliciousInput; // 这是一个安全的内容会被转义 const element h1{title}/h1;4. JSX 表示对象Babel 会把 JSX 转译成一个名为React.createElement()的函数调用。以下两种示例代码完全等效// JSX 写法 const element ( h1 classNamegreeting Hello, world! /h1 ); // 编译后的 React.createElement() 调用 const element React.createElement( h1, {className: greeting}, Hello, world! );React.createElement()会预先执行一些检查以帮助你编写无错代码但实际上它创建了一个这样的对象简化结构// 注意这是简化过的结构 const element { type: h1, props: { className: greeting, children: Hello, world! } };这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象然后使用它们来构建 DOM 以及保持随时更新。5. 在 JSX 中使用条件渲染和循环5.1 条件渲染JSX 中不能直接使用if语句但可以使用三元运算符、逻辑与 () 运算符或者在 JSX 外部使用if语句。function Greeting(props) { const isLoggedIn props.isLoggedIn; // 方法1三元运算符 return ( div {isLoggedIn ? h1Welcome back!/h1 : h1Please sign up./h1} /div ); } // 方法2逻辑与运算符 (用于当条件为 true 时渲染) function Mailbox(props) { const unreadMessages props.unreadMessages; return ( div h1Hello!/h1 {unreadMessages.length 0 h2 You have {unreadMessages.length} unread messages. /h2 } /div ); }5.2 循环渲染列表使用 JavaScript 的map()函数来遍历数组并生成元素列表。function NumberList(props) { const numbers props.numbers; const listItems numbers.map((number) // key 帮助 React 识别哪些元素改变了是必须的 li key{number.toString()} {number} /li ); return ( ul{listItems}/ul ); } // 使用组件 const numbers [1, 2, 3, 4, 5]; const element NumberList numbers{numbers} /;6. 总结JSX 是 React 的核心特性之一它通过将 HTML 结构与 JavaScript 逻辑紧密结合提供了一种声明式、直观的 UI 构建方式。它并不是模板语言而是 JavaScript 的语法扩展最终会被编译成普通的 JavaScript 对象React 元素。掌握 JSX 是学习现代前端框架如 React的重要一步。记住 JSX 的几个关键点它是 JavaScript 的语法扩展不是字符串也不是 HTML。使用花括号{}嵌入表达式。编译后变成React.createElement()调用。React DOM 使用 camelCase 属性命名例如className、htmlFor。React DOM 在渲染前会转义所有内容防止 XSS 攻击。
1. 什么是 JSXJSXJavaScript XML是一种 JavaScript 的语法扩展它允许我们在 JavaScript 代码中编写类似 HTML 的结构。虽然它看起来像 HTML但 JSX 在编译时会被转换为普通的 JavaScript 函数调用通常是React.createElement()。JSX 的核心思想是将 UI 的表示逻辑和渲染逻辑通过声明式的方式结合在一起而不是将它们分离到不同的文件中。这种“关注点分离”的新思路让组件成为了 UI 的独立、可复用的单元。2. JSX 的基本语法2.1 嵌入表达式在 JSX 中你可以通过花括号{}嵌入任何有效的 JavaScript 表达式。const name React; const element h1Hello, {name}!/h1; // 也可以调用函数 function formatName(user) { return user.firstName user.lastName; } const user { firstName: John, lastName: Doe }; const element2 h1Hello, {formatName(user)}!/h1;2.2 指定属性你可以使用引号来将属性值指定为字符串字面量也可以使用花括号在属性值中插入一个 JavaScript 表达式。// 字符串字面量 const element1 div tabIndex0/div; // JavaScript 表达式 const element2 img src{user.avatarUrl} /; // 注意由于 JSX 语法上更接近 JavaScript 而不是 HTML所以 React DOM 使用 camelCase小驼峰命名来定义属性的名称而不使用 HTML 属性名称的命名约定。 // 例如JSX 里的 class 变成了 className而 tabindex 则变为 tabIndex。 const element3 div classNamecontainer tabIndex{-1}/div;2.3 子元素如果一个标签里面没有内容你可以使用/来闭合标签就像 XML/HTML 一样。JSX 标签里能够包含很多子元素。const element ( div h1Hello!/h1 h2Good to see you here./h2 /div );3. JSX 防止注入攻击React DOM 在渲染所有输入内容之前默认会进行转义。它可以确保在你的应用中永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS跨站脚本攻击。const title response.potentiallyMaliciousInput; // 这是一个安全的内容会被转义 const element h1{title}/h1;4. JSX 表示对象Babel 会把 JSX 转译成一个名为React.createElement()的函数调用。以下两种示例代码完全等效// JSX 写法 const element ( h1 classNamegreeting Hello, world! /h1 ); // 编译后的 React.createElement() 调用 const element React.createElement( h1, {className: greeting}, Hello, world! );React.createElement()会预先执行一些检查以帮助你编写无错代码但实际上它创建了一个这样的对象简化结构// 注意这是简化过的结构 const element { type: h1, props: { className: greeting, children: Hello, world! } };这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象然后使用它们来构建 DOM 以及保持随时更新。5. 在 JSX 中使用条件渲染和循环5.1 条件渲染JSX 中不能直接使用if语句但可以使用三元运算符、逻辑与 () 运算符或者在 JSX 外部使用if语句。function Greeting(props) { const isLoggedIn props.isLoggedIn; // 方法1三元运算符 return ( div {isLoggedIn ? h1Welcome back!/h1 : h1Please sign up./h1} /div ); } // 方法2逻辑与运算符 (用于当条件为 true 时渲染) function Mailbox(props) { const unreadMessages props.unreadMessages; return ( div h1Hello!/h1 {unreadMessages.length 0 h2 You have {unreadMessages.length} unread messages. /h2 } /div ); }5.2 循环渲染列表使用 JavaScript 的map()函数来遍历数组并生成元素列表。function NumberList(props) { const numbers props.numbers; const listItems numbers.map((number) // key 帮助 React 识别哪些元素改变了是必须的 li key{number.toString()} {number} /li ); return ( ul{listItems}/ul ); } // 使用组件 const numbers [1, 2, 3, 4, 5]; const element NumberList numbers{numbers} /;6. 总结JSX 是 React 的核心特性之一它通过将 HTML 结构与 JavaScript 逻辑紧密结合提供了一种声明式、直观的 UI 构建方式。它并不是模板语言而是 JavaScript 的语法扩展最终会被编译成普通的 JavaScript 对象React 元素。掌握 JSX 是学习现代前端框架如 React的重要一步。记住 JSX 的几个关键点它是 JavaScript 的语法扩展不是字符串也不是 HTML。使用花括号{}嵌入表达式。编译后变成React.createElement()调用。React DOM 使用 camelCase 属性命名例如className、htmlFor。React DOM 在渲染前会转义所有内容防止 XSS 攻击。
)
