当前位置：首页 > news >正文

React 05

news 2025/10/28 0:34:40

1 JSX 是一种语法扩展，而 React 则是一个 JavaScript 的库

介绍新的 JSX 转换 – React 博客

2 标签需要自闭合

在 JSX 中，标签的闭合规则是：

自闭合标签（如<img>、<input>、<br>等原本在 HTML 中是自闭合的标签），必须以/结尾，写成<img />、<input />、<br />的形式。
非自闭合标签（如<div>、<li>、<p>等需要包含内容的标签），不需要以/结尾，而是要写成<div>内容</div>、<li>项</li>、<p>文本</p>这样的开始标签 + 内容 + 闭合标签的形式。

所以并不是所有标签都要以/结尾，而是只有自闭合标签需要这样写，以此来区分标签的类型和闭合方式，保证 JSX 语法的正确性。

3 React Dom

普通组件（例如 <div>） – React 中文文档

在 React 中，React DOM 元素是 React 用于描述页面上 DOM 结构的一种 “虚拟表示”，它是构建 React 应用 UI 的基本单元。可以从以下几个方面理解：

1. 本质

它是一个 JavaScript 对象，用来描述你想要在页面上呈现的 DOM 结构（如 <div>、<button>、<img> 等），包含了元素的类型（如 div）、属性（如 className、src）和子元素等信息。

例如，下面的代码创建了一个 React DOM 元素：

const element = <img src="https://example.com/photo.jpg" alt="示例图片" />;

它对应的 JavaScript 对象结构大致如下（简化版）：

{type: 'img',props: {src: 'https://example.com/photo.jpg',alt: '示例图片',children: null}
}

2. 与真实 DOM 的关系

React DOM 元素是 “虚拟” 的，它存在于 React 的内存模型中。当 React 要把 UI 渲染到页面上时，会根据这些虚拟元素的描述，去创建或更新真实的 DOM 节点。这种 “虚拟 DOM” 的机制让 React 可以高效地对比、计算 UI 的变化，只更新需要改变的真实 DOM 部分，从而提升性能。

3. 作用

是 React 组件渲染的 “原材料”：组件最终会输出 React DOM 元素（或由多个元素组成的结构），React 再将其转化为真实 DOM 显示在页面上。
描述 UI 结构和交互：通过属性（props）可以给元素传递数据或事件处理函数，从而实现页面的交互逻辑（如点击按钮触发函数）。

4. 与组件的区别

React DOM 元素：是具体的、描述某一个 DOM 节点的对象，对应 HTML 中的基础标签（如 div、p、input 等）。
React 组件：可以由多个 React DOM 元素组合而成，是更高级的封装（比如一个 “用户卡片组件” 可能包含 <div>、<img>、<p> 等多个 DOM 元素）。组件最终也会输出 React DOM 元素供 React 渲染。

简单来说，React DOM 元素是 React 对真实 DOM 的 “蓝图”，它让 React 能够以 JavaScript 对象的方式管理页面结构，进而实现高效的 UI 渲染和更新。

4 {{}}两层花括号内联也要注意驼峰法命名

在 JSX 中通过大括号使用 JavaScript – React 中文文档

在 JSX 中，person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} 里的双花括号，外层 {} 是用来嵌入 JavaScript 表达式的，内层 {} 则是定义一个 JavaScript 对象。所以整体来看，这里就是在给 Avatar 组件传递一个名为 person 的对象类型的 props，内层的 {} 只是对象的语法形式，因此说 “它们只是一个对象”。

简单理解就是：JSX 用外层大括号开启表达式，里面的大括号包裹的是一个普通的 JavaScript 对象，这样就把这个对象作为 person 属性的值传递给了子组件 Avatar。

对象传递规则：在 JSX 中传递 JavaScript 对象时，需用双大括号包裹。因为单大括号用于嵌入 JavaScript 表达式，对象本身也用大括号定义，所以要额外加一层大括号来区分，例如 person={{ name: "Hedy Lamarr", inventions: 5 }}。
内联样式应用：当在 JSX 中使用内联 CSS 样式时，style 属性需接收一个对象，同样通过双大括号实现。React 虽不强制使用内联样式（推荐用 CSS 类），但这种写法是内联样式的标准方式，比如 style={{ backgroundColor: 'red', fontSize: '16px' }}。

5 JSX摘要

JSX 内嵌入的 JavaScript 表达式需返回可渲染的内容（字符串、数字、React 元素等）

问题原因：在 JSX 标签内直接渲染整个对象（如 <h1>{person}'s Todos</h1>）会报错，因为 React 无法直接将未处理的对象作为文本内容展示。
修复方法：需访问对象的具体属性（如 person.name）来渲染，将代码改为 <h1>{person.name}'s Todos</h1> 即可。

补充说明：在 React 开发中，JSX 内嵌入的 JavaScript 表达式需返回可渲染的内容（字符串、数字、React 元素等），对象本身不具备可直接渲染的特性，因此必须明确指定要展示的对象属性。

JSX 中拼接图片 URL 表达式的说明

表达式结构：在 JSX 的 src 属性中，通过 {} 开启 JavaScript 表达式，将 baseUrl、person.imageId、person.imageSize 和 .jpg 拼接成完整的图片 URL 字符串，再通过 {} 结束表达式，即 src={baseUrl + person.imageId + person.imageSize + '.jpg'}。
作用与背景：这种写法常用于 React 项目中动态生成图片资源的 URL，让图片加载可以根据数据（如不同的图片 ID、尺寸）灵活变化，是 JSX 中嵌入 JavaScript 表达式实现动态内容的典型场景。