重学React（一）：描述UI

背景：React现在已经更新到19了，文档地址也做了全面的更新，上一次系统性的学习还是在16-17的大版本更新。所以，现在就开始重新学习吧～

学习内容：

  1. React官网教程：https://zh-hans.react.dev/learn/describing-the-ui
  2. 其他辅助资料（看到再补充）
    补充说明：这次学习更多的是以学习笔记的形式记录，看到哪记到哪
1. 基础知识

React 应用是由被称为 组件 的独立 UI 片段构建而成。React 组件本质上是可以任意添加标签的 JavaScript 函数
React 允许你将标签、CSS 和 JavaScript 组合成自定义“组件”，即 应用程序中可复用的 UI 元素
React 组件是一段可以使用标签进行扩展 的 JavaScript 函数，组件的名称必须以大写字母开头（React的语法规定，这样它才能分清是React组件还是正常的html标签）

// export default 导出声明
// function Profile 定义函数，function名必须首字母大写export default function Profile() {
// return 如果换行，就必须用()将内容包裹
// 没有括号包裹的话，任何在 return 下一行的代码都将被忽略！return (<imgsrc="https://i.imgur.com/MK3eW3Am.jpg"alt="Katherine Johnson"/>)// 或者 标签只有一行的时候括号可以省略return <img src="https://i.imgur.com/MK3eW3Am.jpg" alt="Katherine Johnson" />)
}// 你可以只定义组件一次，然后按需多处和多次使用
export default function Gallery() {return (<section><h1>了不起的科学家</h1><Profile /><Profile /><Profile /></section>);
}// 组件不建议嵌套组件定义，不然会很慢并且可能会有bug产生
export default function Gallery() {// 🔴 永远不要在组件中定义组件function Profile() {// ...}// ...
}// 使用时可以import './Gallery.js' 或者 './Gallery'，在 React 里都能正常使用，只是前者更符合 原生 ES 模块
import Gallery from './Gallery';
import Gallery from './Gallery.js';
导出方式

默认导出 vs 具名导出
一个文件里有且仅有一个 默认 导出，但是可以有任意多个 具名 导出
当使用默认导入时，可以在 import 语句后面进行任意命名。比如 import Banana from ‘./Button.js’。相反，对于具名导入，导入和导出的名字必须一致。
同一文件中，有且仅有一个默认导出，但可以有多个具名导出

语法导出语句导入语句
默认export default function Button() {}import Button from ‘./Button.js’;
具名export function Button() {}import { Button } from ‘./Button.js’;
JSX
  1. 只能返回一个根元素
    在一个组件中包含多个元素，需要用一个父标签把它们包裹起来，如果不想添加新的dom元素，可以使用<>...</>（Fragment），React Fragment 允许将子元素分组，而不会在 HTML 结构中添加额外节点
    原因：JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来
  2. 标签必须闭合
    这是强制规定，要么自闭合（<img />），要么添加闭合标签(<li>...</li>)
  3. 使用驼峰式命名法给大部分属性命名
    JSX 最终会被转化为 JavaScript，而 JSX 中的属性也会变成 JavaScript 对象中的键值对。组件经常会遇到需要用变量的方式读取这些属性的时候。但 JavaScript 对变量的命名有限制，所以需要避开这些限制
    1. 变量名称不能包含 - 符号，所以属性大部分用驼峰
    2. 变量不能用保留字如class，所以在jsx中用className代替
    3. 由于历史原因，aria-* 和 data-* 属性是以带 - 符号的 HTML 格式书写的

需要将一个字符串属性传递给 JSX 时，把它放到单引号或双引号

// "" 引号中的内容按照字符串的形式处理，单引号双引号都可以，但使用双引号会多点
// {} 大括号中的内容会被动态引用，直接在标签中使用 JavaScript，可以在其他地方声明，在使用的时候直接读取js对应的值
// 大括号内的任何 JavaScript 表达式都能正常运行
export default function Avatar() {
const alt = "Gregorio Y. Zara"
//return (<imgclassName="avatar"src="https://i.imgur.com/7vQD0fPs.jpg"alt={alt}/>);
}

大括号使用场景：

  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中还可以传递对象，对象也是用大括号表示，所以要引用对象的时候就需要使用两个括号
JSX 是一种模板语言的最小实现，因为它允许你通过 JavaScript 来组织数据和逻辑

Props

React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它，包括对象、数组和函数等

import { getImageUrl } from './utils.js';
// props是组件的唯一参数
// function里使用大括号获取props是解构
// 也可以写成这样
// function Avatar(props) {
//	const person = props.person
//	const size = props.size
// }
// 如果你想在没有指定值的情况下给 prop 一个默认值，可以通过在参数后面写 = 和默认值来进行解构
// 默认值仅在缺少 size prop 或 size={undefined} 时生效，等于null都不行
function Avatar({ person, size=100 }) {
// person 和 size 是可访问的return (<imgclassName="avatar"src={getImageUrl(person)}alt={person.name}width={size}height={size}/>);
}export default function Profile() {
// 这样使用不同的参数，就能展示出两个类似但是又独立的组件，这就是组件复用一个很重要的意义return (<div><Avatarsize={100}person={{ name: 'Katsuko Saruhashi', imageId: 'YfeOqp2'}}/><Avatarsize={80}person={{name: 'Aklilu Lemma', imageId: 'OKS67lh'}}/></div>);
}// 还可以使用 JSX 展开语法传递 props 
// 像这个场景，props里面所有的内容都是需要传递到Avatar组件中时，就可以直接用展开语法传递
function Profile({ person, size, isSepia, thickBorder }) {return (<div className="card"><Avatarperson={person}size={size}isSepia={isSepia}thickBorder={thickBorder}/></div>);
}
// 可以写成这样
function Profile(props) {return (<div className="card"><Avatar {...props} /></div>);
}
// 假设Profile 中isSepia不需要传递，其他都需要，还可以写成这样
function Profile({isSepia, ...rest}) {return (<div className="card"><Avatar {...rest} /></div>);
}

当你将内容嵌套在 JSX 标签中时，父组件将在名为 children 的 prop 中接收到该内容
通俗的来说就是某个组件标签内容，在接收的时候会自动处理成children的props
<Aaa><div>里面是一系列的内容</div> </Aaa>，在声明Aaa这个组件时，有一个隐藏props，children，表示的就是div及其包裹的内容

可以将带有 children prop 的组件看作有一个“洞”，可以由其父组件使用任意 JSX 来“填充”
在这里插入图片描述

import Avatar from './Avatar.js';function Card({ children }) {return (<div className="card">{children}</div>);
}export default function Profile() {return (<Card><Avatarsize={100}person={{ name: 'Katsuko Saruhashi',imageId: 'YfeOqp2'}}/></Card>);
}

props 是 不可变的。当一个组件需要改变它的 props（例如，响应用户交互或新数据）时，它不得不“请求”它的父组件传递 不同的 props —— 一个新对象！它的旧 props 将被丢弃，最终 JavaScript 引擎将回收它们占用的内存
Props 是只读的时间快照：每次渲染都会收到新版本的 props
你不能改变 props。当你需要交互性时，你可以设置 state。

渲染

在 React 中，你可以通过使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/902476.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AI大模型：（二）2.3 预训练自己的模型

AI大模型：（二）2.3 预训练自己的模型

目录 1.预训练原理 2.预训练范式 1.未标注数据 2.标注数据 3.有正确答案、也有错误答案 3.手撕transform模型 3.1.transform模型代码 3.2.训练数据集 3.3.预训练 3.4.推理 4.如何选择模型
阅读更多...
gradle可用的下载地址(免费)

gradle可用的下载地址(免费)

这几天接手一个老项目&#xff0c;想找gradle老版本的&#xff0c;但一搜&#xff0c;虽然在CSDN上搜索出来一堆&#xff0c;但都是收费&#xff0c;有些甚至要几十积分(吃相有点难看了)。 我找了一个能访问的地址&#xff0c;特地分享出来&#xff0c;有需要的自取&#xff01…
阅读更多...
vue3新增特性

vue3新增特性

一、Vue 3 新增特性 1. Composition API 概述： Composition API 提供了一种更灵活和强大的方式来组织和复用逻辑。适用于复杂组件和逻辑复用场景。主要功能： setup 函数：组件的入口点，用于定义响应式数据、方法、生命周期钩子等。响应式 API：ref 和 reactive 提供更细粒度…
阅读更多...
前端性能优化全攻略：JavaScript 优化、DOM 操作、内存管理、资源压缩与合并、构建工具及性能监控

前端性能优化全攻略：JavaScript 优化、DOM 操作、内存管理、资源压缩与合并、构建工具及性能监控

1 为什么需要性能优化&#xff1f; 1.1 性能优化的核心价值&#xff1a;用户体验与业务指标 性能优化不仅是技术层面的追求&#xff0c;更是直接影响用户体验和业务成败的关键因素。 用户体验&#xff08;UX&#xff09;&#xff1a; 响应速度&#xff1a;用户期望页面加载时…
阅读更多...
【Unity笔记】Unity + OpenXR项目无法启动SteamVR的排查与解决全指南

【Unity笔记】Unity + OpenXR项目无法启动SteamVR的排查与解决全指南

图片为AI生成 一、前言 随着Unity在XR领域全面转向OpenXR标准&#xff0c;越来越多的开发者选择使用OpenXR来构建跨平台的VR应用。但在项目实际部署中发现&#xff1a;打包成的EXE程序无法正常启动SteamVR&#xff0c;或者SteamVR未能识别到该应用。本文将以“Unity OpenXR …
阅读更多...
Curl用法解析

Curl用法解析

Curl 用法解析 简介 Curl 是一个强大的命令行工具&#xff0c;主要用于从服务器发送 HTTP 请求并获取数据。它广泛应用于调试 RESTful API、文件上传下载、模拟用户交互等多种场景。下面是一些基本用法及常见参数的分析&#xff1a; 基础用法 curl [options] [URL]其中最基…
阅读更多...
C语言教程（十一）：C 语言中四种主要作用域及作用域嵌套遮蔽

C语言教程（十一）：C 语言中四种主要作用域及作用域嵌套遮蔽

一、引言 在 C 语言里&#xff0c;作用域指的是程序中变量、函数、类型等标识符能够被使用的范围。C 语言里有四种主要的作用域&#xff1a;块作用域、函数作用域、文件作用域和原型作用域&#xff0c;下面为你展开介绍&#xff1a; 二、块作用域 定义&#xff1a;块作用域是 C…
阅读更多...
初次尝试Ghidra

初次尝试Ghidra

最近看京东读书上有本书叫《Ghidra权威指南》&#xff0c;竟然是美国国家安全局出品的逆向工具&#xff0c;我真是孤陋寡闻&#xff0c;第一次听说。赶紧试试。 Release Ghidra 11.3.2 NationalSecurityAgency/ghidra GitHub 最新版本竟然是上周发布的&#xff0c;看来很活…
阅读更多...
乐视系列玩机---乐视2 x620 x628等系列线刷救砖以及刷写第三方twrp 卡刷第三方固件步骤解析

乐视系列玩机---乐视2 x620 x628等系列线刷救砖以及刷写第三方twrp 卡刷第三方固件步骤解析

乐视2 x620 x628 x626等，搭载了Helio X20处理器,mtk6797芯片。 通过博文了解💝💝💝 1💝💝💝-----详细解析乐视2 x620系列黑砖线刷救砖的步骤 2💝💝💝----官方两种更新卡刷步骤以及刷写第三方twrp过程与资源 3💝💝💝----乐视2 mtk系列机型救砖 刷…
阅读更多...
web原生API AbortController网络请求取消方法使用介绍：防止按钮重复点击提交得最佳方案

web原生API AbortController网络请求取消方法使用介绍：防止按钮重复点击提交得最佳方案

在前端开发中&#xff0c;取消网络请求是一个常见的需求&#xff0c;尤其是在用户频繁操作或需要中断长时间请求的场景下。 AbortController 主要用于 ​优雅地管理和取消异步操作&#xff1a; 浏览器原生 API 一、代码解析 1. ​创建 AbortController 实例 const controlle…
阅读更多...
2025智能驾驶趋势评估

2025智能驾驶趋势评估

以下是对2025年智能驾驶趋势的评估&#xff1a; 技术发展 • 自动驾驶级别提升&#xff1a;2025年有望成为L3级自动驾驶的商用元年。L3级自动驾驶技术开始从高端车型向20万元以下价格带下沉&#xff0c;部分车企如江淮和华为合作的尊界S800、小鹏汽车等都在积极推进L3级自动驾驶…
阅读更多...
Spring MVC DispatcherServlet 的作用是什么？ 它在整个请求处理流程中扮演了什么角色？为什么它是核心？

Spring MVC DispatcherServlet 的作用是什么？ 它在整个请求处理流程中扮演了什么角色？为什么它是核心？

DispatcherServlet 是 Spring MVC 框架的绝对核心和灵魂。它扮演着前端控制器&#xff08;Front Controller&#xff09;的角色&#xff0c;是所有进入 Spring MVC 应用程序的 HTTP 请求的统一入口点和中央调度枢纽。 一、 DispatcherServlet 的核心作用和职责&#xff1a; 请…
阅读更多...
Linux 内核中 cgroup 子系统 cpuset 是什么？

Linux 内核中 cgroup 子系统 cpuset 是什么？

cpuset 是 Linux 内核中 cgroup&#xff08;控制组&#xff09; 的一个子系统&#xff0c;用于将一组进程&#xff08;或任务&#xff09;绑定到特定的 CPU 核心和 内存节点&#xff08;NUMA 节点&#xff09;上运行。它通过限制进程的 CPU 和内存资源的使用范围&#xff0c;优…
阅读更多...
【MATLAB第115期】基于MATLAB的多元时间序列的ARIMAX的预测模型

【MATLAB第115期】基于MATLAB的多元时间序列的ARIMAX的预测模型

【MATLAB第115期】基于MATLAB的多元时间序列的ARIMAX的预测模型 ‌一、简介 ARIMAX‌&#xff08;Autoregressive Integrated Moving Average with eXogenous inputs&#xff09;模型是一种结合自回归&#xff08;AR&#xff09;、差分&#xff08;I&#xff09;、移动平均&a…
阅读更多...
数据库对象与权限管理-视图与索引管理

数据库对象与权限管理-视图与索引管理

一、视图&#xff08;View&#xff09;管理 1. 视图的定义与本质 视图&#xff08;View&#xff09;是Oracle数据库中的逻辑表&#xff0c;它不直接存储数据&#xff0c;而是通过预定义的SQL查询动态生成结果集。视图的本质可以理解为&#xff1a; 虚拟表&#xff1a;用户可…
阅读更多...
IPoIB驱动接收路径深度解析：从数据包到协议栈

IPoIB驱动接收路径深度解析：从数据包到协议栈

引言 在InfiniBand网络中，IPoIB（IP-over-InfiniBand）协议通过封装和模拟以太网行为，使得传统IP应用能够无缝运行。其接收路径是性能优化的关键环节，涉及硬件中断处理、内存管理、协议解析等多个复杂步骤。本文以Linux内核中ipoib_ib_handle_rx_wc_rss函数为核心，结合IPo…
阅读更多...
Oracle高级语法篇-分析函数详解

Oracle高级语法篇-分析函数详解

Oracle 分析函数详解 在Oracle数据库中&#xff0c;分析函数&#xff08;Analytical Functions&#xff09;是一类非常强大的工具&#xff0c;它们允许在查询结果集上进行复杂的计算和分析&#xff0c;而无需使用自连接或子查询等复杂操作。本文将详细介绍Oracle分析函数的使用…
阅读更多...
使用 Nacos 的注意事项与最佳实践

使用 Nacos 的注意事项与最佳实践

&#x1f4f9; 背景 Nacos 凭借其强大&#x1f4aa;的服务发现、配置管理和服务管理能力&#xff0c;成为构建分布式系统的得力助手。然而&#xff0c;要充分发挥 Nacos 的优势&#xff0c;实现系统的高性能、高可用&#xff0c;掌握其使用过程中的注意事项和最佳实践至关…
阅读更多...
解决Python与Java交互乱码问题：从编码角度优化数据流

解决Python与Java交互乱码问题：从编码角度优化数据流

在现代软件开发中&#xff0c;跨语言系统的集成已经成为日常工作的一部分。特别是当Python和Java之间进行交互时&#xff0c;编码问题往往会成为导致数据传输错误、乱码以及难以调试的主要原因之一。 你是否曾遇到过这种情境&#xff1a;Python脚本通过标准输出返回了正确的数…
阅读更多...
AI大模型－window系统CPU版安装anaconda以及paddle详细步骤-亲测有效

AI大模型－window系统CPU版安装anaconda以及paddle详细步骤-亲测有效

window系统CPU版安装anaconda以及paddle详细步骤-亲测有效 一 安装anaconda 下载地址：anaconda下载 下载成功后，选择非C盘安装，按提示安装即可修改镜像文件 安装成功后，运行anaconda软件，若提示更新则点击更新，更新完后，修改镜像文件 找到用户目录下的.condarc文件，覆…
阅读更多...
最新文章

Copyright @ 2022~2023