react之组件与JSX

devtools/2024/9/20 2:05:36/ 标签: react.js, 前端, 前端框架

第一章 - 描述用户界面

概述:React是一个用于构建用户界面(UI)的JavaScript库,用户界面由按钮,文本和图像等小单元内容构建而成。React帮助你把它们组合成可重用,可嵌套的组件。从web端网站到移动端应用,屏幕上的所有内容都可以被分解成组件。

组件

定义组件

一直以来,创建网页时,Web 开发人员会用标签描述内容,然后通过 JavaScript 来增加交互。这种在 Web 上添加交互的方式能产生出色的效果。现在许多网站和全部应用都需要交互。React 最为重视交互性且使用了相同的处理方式:React 组件是一段可以 使用标签进行扩展 的 JavaScript 函数。如下所示(你可以编辑下面的示例):

export default function Profile() {return (<imgsrc="https://i.imgur.com/MK3eW3Am.jpg"alt="Katherine Johnson"/>)
}

以下是构建组件的方法:

  1. 导出组件:export default 前缀是一种 JavaScript 标准语法(非 React 的特性)。它允许你导出一个文件中的主要函数以便你以后可以从其他文件引入它。

  2. 定义函数:React组件是常规的JavaScript函数,但组件的名称必须以大写字母开头,否则它们将无法运行

  3. 添加标签:这个组件返回一个带有 srcalt 属性的 <img /> 标签。<img /> 写得像 HTML,但实际上是 JavaScript!这种语法被称为 JSX,它允许你在 JavaScript 中嵌入标签。

    返回语句可以全写在一行上,如下面组件中所示:

    return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;//React 是常规的 JavaScript 函数,除了:
    //它们的名字总是以大写字母开头。
    //它们返回 JSX 标签。
    

    但是,如果你的标签和 return 关键字不在同一行,则必须把它包裹在一对括号中,如下所示:

    return (<div><img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /></div>
    );// 陷阱:没有括号包裹的话,任何在return下一行的代码都将被忽略
    

使用组件

现在你已经定义了 Profile 组件,你可以在其他组件中使用它。例如,你可以导出一个内部使用了多个 Profile 组件的 Gallery 组件:

function Profile() {return (<imgsrc="https://i.imgur.com/MK3eW3As.jpg"alt="Katherine Johnson"/>);
}export default function Gallery() {return (<section><h1>了不起的科学家</h1><Profile /><Profile /><Profile /></section>);
}

嵌套和组织组件

组件是常规的 JavaScript 函数,所以你可以将多个组件保存在同一份文件中。当组件相对较小或彼此紧密相关时,这是一种省事的处理方式。如果这个文件变得臃肿,你也可以随时将 Profile 移动到单独的文件中

因为 Profile 组件在 Gallery 组件中渲染——甚至好几次!——我们可以认为 Gallery 是一个 父组件,将每个 Profile 渲染为一个“孩子”。这是 React 的神奇之处:你可以只定义组件一次,然后按需多处和多次使用。

// 陷阱
// 组件可以渲染其它组件,但是请不要嵌套它们的定义:
export default function Gallery() {// 🔴 永远不要在组件中定义组件function Profile() {// ...}// ...
}
// 上面这段代码非常慢,并且会导致bug产生。因此,你应该在顶层定义每个组件
export default function Gallery() {// ...
}
// ✅ 在顶层声明组件
function Profile() {// ...
}
// 当子组件需要使用父组件的数据时,你需要 通过 props 的形式进行传递,而不是嵌套定义。

组件的导入和导出

默认导出和具名导出

这是 JavaScript 里两个主要用来导出值的方式:默认导出和具名导出。到目前为止,我们的示例中只用到了默认导出。但你可以在一个文件中,选择使用其中一种,或者两种都使用。一个文件里有且仅有一个 *默认* 导出,但是可以有任意多个 *具名* 导出。

在这里插入图片描述

当使用默认导入时,你可以在 import 语句后面进行任意命名。比如 import Banana from './Button.js',如此你能获得与默认导出一致的内容。相反,对于具名导入,导入和导出的名字必须一致。这也是为什么称其为 具名 导入的原因!

通常,文件中仅包含一个组件时,人们会选择默认导出,而当文件中包含多个组件或某个值需要导出时,则会选择具名导出。 无论选择哪种方式,请记得给你的组件和相应的文件命名一个有意义的名字。我们不建议创建未命名的组件,比如 export default () => {},因为这样会使得调试变得异常困难。

JSX

1. 只能返回一个根元素

如果想要在一个组件中包含多个元素,需要用一个父标签把它们包裹起来

例如,你可以使用一个 <div> 标签:

<div><h1>海蒂·拉玛的待办事项</h1><img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo"><ul>...</ul>
</div>

如果你不想在标签中增加一个额外的 <div>,可以用 <></> 元素来代替:

<><h1>海蒂·拉玛的待办事项</h1><img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo"><ul>...</ul>
</>

这个空标签被称作 Fragment。React Fragment 允许你将子元素分组,而不会在 HTML 结构中添加额外节点。

深入探讨

JSX 虽然看起来很像 HTML,但在底层其实被转化为了 JavaScript 对象,你不能在一个函数中返回多个对象,除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。

2. 标签必须闭合

JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成 <img />,而像 <li>oranges 这样只有开始标签的元素必须带有闭合标签,需要改为 <li>oranges</li>

海蒂·拉玛的照片和待办事项的标签经修改后变为:

<><img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo"/><ul><li>发明一种新式交通信号灯</li><li>排练一个电影场景</li><li>改进频谱技术</li></ul></>

3. 使用驼峰式命名法给大部分属性命名!

JSX 最终会被转化为 JavaScript,而 JSX 中的属性也会变成 JavaScript 对象中的键值对。在你自己的组件中,经常会遇到需要用变量的方式读取这些属性的时候。但 JavaScript 对变量的命名有限制。例如,变量名称不能包含 - 符号或者像 class 这样的保留字。

这就是为什么在 React 中,大部分 HTML 和 SVG 属性都用驼峰式命名法表示。例如,需要用 strokeWidth 代替 stroke-width。由于 class 是一个保留字,所以在 React 中需要用 className 来代替。这也是 DOM 属性中的命名:

摘要

现在你知道了为什么我们需要 JSX 以及如何在组件中使用它:

  • 由于渲染逻辑和标签是紧密相关的,所以 React 将它们存放在一个组件中。
  • JSX 类似 HTML,不过有一些区别。如果需要的话可以使用 转化器 将 HTML 转化为 JSX。
  • 错误提示通常会指引你将标签修改为正确的格式。

在JSX中通过大括号使用JavaScript

JSX 允许你在 JavaScript 中编写类似 HTML 的标签,从而使渲染的逻辑和内容可以写在一起。有时候,你可能想要在标签中添加一些 JavaScript 逻辑或者引用动态的属性。这种情况下,你可以在 JSX 的大括号内来编写 JavaScript。

使用引号传递字符串

当你想把一个字符串属性传递给 JSX 时,把它放到单引号或双引号中:

export default function Avatar() {return (<imgclassName="avatar"src="https://i.imgur.com/7vQD0fPs.jpg"alt="Gregorio Y. Zara"/>);
}

但是如果你想要动态地指定 srcalt 的值呢?你可以 {} 替代 "" 以使用 JavaScript 变量

export default function Avatar() {const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';const description = 'Gregorio Y. Zara';return (<imgclassName="avatar"src={avatar}alt={description}/>);
}

使用大括号:一扇进入JavaScript世界的窗户

JSX是一种编写JavaScript的特殊方式。这为在括号{ } 中使用JavaScript带来了可能。

export default function TodoList() {const name = 'Gregorio Y. Zara';return (<h1>{name}'s To Do List</h1>);
}

大括号内的任何 JavaScript 表达式都能正常运行,包括像 formatDate() 这样的函数调用:

const today = new Date();function formatDate(date) {return new Intl.DateTimeFormat('zh-CN',{ weekday: 'long' }).format(date);
}export default function TodoList() {return (<h1>To Do List for {formatDate(today)}</h1>);
}
可以在哪使用大括号

在 JSX 中,只能在以下两种场景中使用大括号:

  1. 用作 JSX 标签内的文本<h1>{name}'s To Do List</h1> 是有效的,但是 <{tag}>Gregorio Y. Zara's To Do List</{tag}> 无效。
  2. 用作紧跟在 = 符号后的 属性src={avatar} 会读取 avatar 变量,但是 src="{avatar}" 只会传一个字符串 {avatar}

使用“双大括号”:JSX中的css和对象

除了字符串、数字和其它 JavaScript 表达式,你甚至可以在 JSX 中传递对象。对象也用大括号表示,例如 { name: "Hedy Lamarr", inventions: 5 }。因此,为了能在 JSX 中传递,你必须用另一对额外的大括号包裹对象:person={{ name: "Hedy Lamarr", inventions: 5 }}

你可能在 JSX 的内联 CSS 样式中就已经见过这种写法了。React 不要求你使用内联样式(使用 CSS 类就能满足大部分情况)。但是当你需要内联样式的时候,你可以给 style 属性传递一个对象:

export default function TodoList() {return (<ul style={{backgroundColor: 'black',color: 'pink'}}><li>Improve the videophone</li><li>Prepare aeronautics lectures</li><li>Work on the alcohol-fuelled engine</li></ul>);
}
// 陷阱:内联style属性使用驼峰命名法编写。例如,HTML <ul style="background-color: black"> 在你的组件里应该写成 <ul style={{ backgroundColor: 'black' }}>。

JavaScript对象和大括号的更多可能

你可以将多个表达式合并到一个对象中,在JSX的大括号内分别使用它们

const person = {name: 'Gregorio Y. Zara',theme: {backgroundColor: 'black',color: 'pink'}
};export default function TodoList() {return (<div style={person.theme}><h1>{person.name}'s Todos</h1><imgclassName="avatar"src="https://i.imgur.com/7vQD0fPs.jpg"alt="Gregorio Y. Zara"/><ul><li>Improve the videophone</li><li>Prepare aeronautics lectures</li><li>Work on the alcohol-fuelled engine</li></ul></div>);
}

JSX 是一种模板语言的最小实现,因为它允许你通过 JavaScript 来组织数据和逻辑。

摘要

现在你几乎了解了有关 JSX 的一切:

  • JSX 引号内的值会作为字符串传递给属性。
  • 大括号让你可以将 JavaScript 的逻辑和变量带入到标签中。
  • 它们会在 JSX 标签中的内容区域或紧随属性的 = 后起作用。
  • {{}} 并不是什么特殊的语法:它只是包在 JSX 大括号内的 JavaScript 对象。

http://www.ppmy.cn/devtools/15888.html

相关文章

Flink容错机制

Flink的容错机制是一个复杂而精细的系统&#xff0c;旨在确保在分布式流处理过程中&#xff0c;即使在发生故障的情况下&#xff0c;也能保持数据的一致性和计算的正确性。以下是对Flink容错机制的详细阐述&#xff1a; 首先&#xff0c;Flink的容错机制建立在状态一致性的基础…

ATECLOUD测试系统如何检测电机驱动模块

电机驱动模块是驱动电机的电路模块&#xff0c;通过将电源提供的电能转化为电机所需的电能&#xff0c;来控制电机的启停、转速和旋转方向等。为了保证电机可以正常运行&#xff0c;需要对电机模块进行各项指标检测&#xff0c;评估电机驱动模块的性能。 西安某军工方向科技公司…

牛客NC209 最短无序连续子数组【中等 数组,双指针 C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/d17f4abd1d114617b51e951027be312e 思路 解题思路 1、方法1&#xff0c;排序对比&#xff1a;将数组按升序排序&#xff0c;然后与原数组对照&#xff0c;从哪里开始变化到哪里结束变化的数组就是答案。 2、 方…

使用uni-app开发app时遇到mqtt.js不可用的问题

使用uni-app开发app时遇到mqtt.js不可用的问题 1 问题背景 基于 Vue3 版本创建了 uni-app 项目用于开发微信小程序&#xff0c;项目中用到了 mqtt.js&#xff08;v4.1.0&#xff09;&#xff0c;编译为微信小程序能够正常运行&#xff0c;但是编译为 APP 后&#xff0c;控制台…

【Java EE】文件内容的读写——数据流

目录 1.InputStream概述 1.1方法 2.FileInputStream概述 2.1构造方法 2.2代码示例 2.3.利用Scanner进行字符读取 3.OutputStream概述 3.1方法 3.2利用OutputStreamWriter进行字符写入 3.3利用PrintWriter找到我们熟悉的方法 1.InputStream概述 1.1方法 修饰符及返回…

3.8设计模式——State 状态模式(行为型)

意图 允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类。 结构 Context&#xff08;上下文&#xff09;定义客户感兴趣的接口&#xff1b;维护一个ConcreteState子类的实例&#xff0c;这个实例定义当前状态。State&#xff08;状态&#xff09;定义…

综合练习

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 下面我们通过一些实战练习加深对存储过程和函数的认识 以 scott 用户下 emp 数据表为基础&#xff0c;创建如下过程 (1)以部门编号为输入参数&#xff0c;查询该部门的平均…

浅理解vue2中的模板编译

vue组件实例在初始化完成各种状态数据后&#xff0c;会触发vm.$mount()方法来进行模板编译阶段&#xff0c;有两种触发方式 // 方法一&#xff1a;主动触发 new Vue({ el: #app }) if (vm.$options.el) {vm.$mount(vm.$options.el); }// 方法二&#xff1a;手动调用 new Vue()…

2024深圳杯C题的8页思路分析+所有代码可执行+参考文献+持续更新参考论文(已经更新了代码与图像)

比赛题目的完整版思路可执行代码数据参考论文都会在第一时间更新上传的&#xff0c;大家可以参考我往期的资料&#xff0c;所有的资料数据以及到最后更新的参考论文都是一次付费后续免费的。注意&#xff1a;&#xff08;建议先下单占坑&#xff0c;因为随着后续我们更新资料数…

《QT实用小工具·四十二》圆形发光图像

1、概述 源码放在文章末尾 该项目实现了图像的发光效果&#xff0c;特别适合做头像&#xff0c;项目demo演示如下所示&#xff1a; 项目部分代码如下所示&#xff1a; import QtQuick 2.7 import QtGraphicalEffects 1.12Item {id: rootwidth: 80height: 80property int ra…

Docker中Kafka容器创建/更新Topic支持多分区

前提 自行通过docker部署好kafka&#xff0c;并启动相关容器。 假设Topic为http_capture。 #docker-kafka kafka_dir/opt/docker/kafka/build sudo rm -rf ${kafka_dir}/* cat > ${kafka_dir}/docker-compose.yml <<EOF version: "3.3" services:zookeepe…

【Vue 异步更新和 $nextTick】

文章目录 异步更新机制$nextTick 方法 异步更新机制以及 $nextTick 方法都与 Vue 的响应式系统密切相关&#xff0c;对于开发高效、流畅的应用至关重要。 异步更新机制 Vue 的数据更新是异步执行的。修改 Vue 实例的数据时&#xff0c;Vue 并不会立即更新 DOM。它将数据变更放…

tiktok中的视频怎么无水印下载

在当今数字化时代&#xff0c;TikTok已经成为了年轻人们展示自我的舞台&#xff0c;无数有趣、创意的视频在这个平台上涌现。许多人想要下载TikTok上的视频时常面临一个难题&#xff1a;水印。水印是指视频上方显示的TikTok标志&#xff0c;它在一定程度上限制了用户下载视频并…

vLLM:由伯克利大学LMSYS组织开源的大语言模型高速推理框架-显著提高了大型语言模型(LLM)的服务效率

vLLM是一个由伯克利大学LMSYS组织开源的大语言模型高速推理框架,旨在提升实时场景下语言模型服务的吞吐与内存使用效率134。它是一个快速且易于使用的库,能够与HuggingFace无缝集成134。vLLM的核心是PagedAttention算法,这是一种新颖的注意力算法,通过引入操作系统的虚拟内…

基于享元模式实现连接池

享元模式 结构 享元&#xff08;Flyweight &#xff09;模式中存在以下两种状态&#xff1a; 1. 内部状态&#xff0c;即不会随着环境的改变而改变的可共享部分。 2. 外部状态&#xff0c;指随环境改变而改变的不可以共享的部分。享元模式的实现要领就是区分应用中的这两 种…

一线实战,一次底层超融合故障导致的Oracle异常恢复

背景概述 某客户数据由于底层超融合故障导致数据库产生有大量的坏块&#xff0c;最终导致数据库宕机&#xff0c;通过数据抢救&#xff0c;恢复了全部的数据。下面是详细的故障分析诊断过程&#xff0c;以及详细的解决方案描述&#xff1a; 故障现象 数据库宕机之后&#xff0c…

Vue3页面的执行过程

在 Vue 3 中&#xff0c;一个普通的页面的执行过程可以分为以下几个环节&#xff1a; 创建 Vue 应用程序实例&#xff08;createApp&#xff09;&#xff1a; 使用 createApp 函数创建一个 Vue 根实例。配置根实例--该函数接收一个配置对象作为参数&#xff0c;其中的配置项可包…

Golang | Leetcode Golang题解之第40题组合总和II

题目&#xff1a; 题解&#xff1a; func combinationSum2(candidates []int, target int) (ans [][]int) {sort.Ints(candidates)var freq [][2]intfor _, num : range candidates {if freq nil || num ! freq[len(freq)-1][0] {freq append(freq, [2]int{num, 1})} else {…

【Linux学习】Linux 的虚拟化和容器化技术

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…