React的列表和Key

React的列表

如果我们要在React中把一个数组转化成为我们的列表要怎么转换呢?

你可以通过使用 {} 在 JSX 内构建一个元素集合。

//定义一个NumberList组件
function NumberList(props) {//使用组件需要传入一个number值const numbers = props.numbers;//使用 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 `<li>` 标签const listItems = numbers.map((number) =>  <li>{number}</li>  ); //然后我们把整个 `listItems` 插入到 `<ul>` 元素中return (<ul>{listItems}</ul>  );
}const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById('root')
);

我们使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 <li> 标签,最后我们将得到的数组赋值给 listItems.然后我们把整个 listItems 插入到 <ul> 元素中,然后渲染进 DOM。

当我们运行这段代码,将会看到一个警告 a key should be provided for list items,意思是当你创建一个元素时,必须包括一个特殊的 key 属性。这是为了帮助 React 识别每个列表项的身份,并在进行列表更新时进行优化。

添加key

添加之后就不会再有警告了

function NumberList(props) {const numbers = props.numbers;const listItems = numbers.map((number) =><li key={number.toString()}>   {number}</li>);return (<ul>{listItems}</ul>);
}const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />,document.getElementById('root')
);

为什么一定要添加key

  • 识别列表项的身份:key 属性充当列表项的唯一标识符,帮助 React 区分每个列表项并识别其身份。在进行列表更新时,React 使用 key 属性来确定哪些列表项需要进行添加、移除或更新操作。

  • 提高渲染性能:通过为列表项提供唯一的 key 属性,React 可以更高效地比较前后两个列表的差异,并只对真正需要更新的列表项进行重新渲染。这样可以减少不必要的 DOM 操作和组件实例的创建和销毁,从而提高整体渲染性能。

  • 避免状态丢失:当列表项的顺序发生变化时,如果没有提供 key 属性,React 可能会错误地认为某些列表项被移除,而实际上它们只是在不同的位置重新排列。这可能导致 React 销毁和重新创建组件实例,导致组件状态丢失或不正确的行为。

  • 保持稳定的标识:key 属性的值应该是稳定的、在列表的更新过程中不会发生变化的。这样可以确保在列表项更新时,React 能够正确地匹配前后两个列表中的对应项,并进行正确的更新操作。

key

key的要求

  • 一个元素的 key 必须是这个元素在列表中拥有的一个独一无二的
  • 元素的 key 只有放在就近的数组上下文中才有意义。
  • key 只是在兄弟节点之间必须唯一

元素的 key 只有放在就近的数组上下文中才有意义。

如果你提取出一个 ListItem 组件,你应该把 key 保留在数组中的这个 <ListItem /> 元素上,而不是放在 ListItem 组件中的 <li> 元素上。

例子:不正确的使用 key 的方式

    function ListItem(props) {const value = props.value;return (// 错误!你不需要在这里指定 key:   <li key={value.toString()}>     {value}</li>);}function NumberList(props) {const numbers = props.numbers;const listItems = numbers.map((number) =>// 错误!元素的 key 应该在这里指定:   <ListItem value={number} />  );return (<ul>{listItems}</ul>);}const numbers = [1, 2, 3, 4, 5];ReactDOM.render(<NumberList numbers={numbers} />,document.getElementById('root'));

例子:正确的使用 key 的方式

    function ListItem(props) {// 正确!这里不需要指定 key: return <li>{props.value}</li>;}function NumberList(props) {const numbers = props.numbers;const listItems = numbers.map((number) =>// 正确!key 应该在数组的上下文中被指定   <ListItem key={number.toString()}      value={number} />);return (<ul>{listItems}</ul>);}const numbers = [1, 2, 3, 4, 5];ReactDOM.render(<NumberList numbers={numbers} />,document.getElementById('root'));

一个好的经验法则是:在 map() 方法中的元素需要设置 key 属性。

key 只是在兄弟节点之间必须唯一

数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而,它们不需要是全局唯一的。当我们生成两个不同的数组时,我们可以使用相同的 key 值:

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

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

相关文章

2024华为OD机试真题- 计算三叉搜索树的高度-(C++/Python)-C卷D卷-100分

2024华为OD机试题库-(C卷+D卷)-(JAVA、Python、C++) 题目描述 定义构造三叉搜索树规则如下: 每个节点都存有一个数,当插入一个新的数时,从根节点向下寻找,直到找到一个合适的空节点插入。查找的规则是: 1.如果数小于节点的数减去500,则将数插入节点的左子树 2.如果数大于…

【OC】为category添加weak属性

友友们都知道&#xff0c;分类当中是不能添加property的&#xff0c;因为运行时系统不会自动完成synthesize&#xff0c;所以需要使用runtime的关联对象形式完成property。也就是这一对函数 /** 设置关联对象 param object &#xff1a; 添加属性的对象&#xff0c;通常填入se…

T200HSA单路SDI/HDMI+1路3.5音频高清万能采集卡

产品简介&#xff1a; 同三维T200HSA单路高清万能采集卡&#xff0c;可以采集1路SDI/HDMI高清信号1路3.5音频信号&#xff0c;卡上有1个是HDMI接口1个是SDI接口1个3.5音频口&#xff0c;配件有&#xff1a; 1个小档板&#xff0c;PCI-E2.0 X1&#xff0c;分辨率最高可以达到10…

机器学习模型评估之校准曲线

模型校准曲线&#xff08;Calibration Curve&#xff09;&#xff0c;也称为可靠性曲线&#xff08;Reliability Curve&#xff09;或概率校准曲线&#xff08;Probability Calibration Curve&#xff09;&#xff0c;是一种评估分类模型输出概率准确性的图形工具。它可以帮助我…

【python数据可视化】利用Python爬取天气数据并实现数据可视化,绘制天气轮播图

用Python爬虫抓取全年天气数据并绘制天气轮播图 一、运行结果&#xff1a; 二、代码展示&#xff1a; 由csv文件生成↓ 接下来是绘制天气轮播图 运行结果&#xff1a; 完整代码请看这里↓&#x1f447; 提醒制作这个项目你需要执行以下几个步骤&#xff1a; 确定数据源&#x…

OTN分层结构变成什么样了?

传统OTN的三层架构包括光传输段层&#xff08;OTS&#xff09;、光复用段层&#xff08;OMS&#xff09;和光通道层&#xff08;OCh&#xff09;&#xff0c;它们共同构成了OTN的三层结构。 其中&#xff1a; 光传输段层&#xff08;OTS&#xff09;&#xff1a;OTS是OTN中最高…

React是如何渲染元素和组件的

元素的概念 元素是构成 React 应用的最小单位。元素描述了你在屏幕上想看到的内容。React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。 将一个元素渲染为 DOM 假设我们的 HTML 文件有一个根元素 <div>该节点内的所有内容都将由 …

鸿蒙 Web组件的生命周期(api10、11、12)

概述 开发者可以使用Web组件加载本地或者在线网页。 Web组件提供了丰富的组件生命周期回调接口&#xff0c;通过这些回调接口&#xff0c;开发者可以感知Web组件的生命周期状态变化&#xff0c;进行相关的业务处理。 Web组件的状态主要包括&#xff1a;Controller绑定到Web组…

力扣SQL50 平均售价 ifnull SUM 连表查询

Problem: 1251. 平均售价 &#x1f468;‍&#x1f3eb; 参考题解&#xff08;题目数据增强&#xff0c;代码只能过90%的点&#xff09; &#x1f37b; AC code SELECT p.product_id, ROUND(ifnull(SUM(units * price) / SUM(units), 0),2) AS average_price FROM prices a…

初学51单片机之数字秒表

不同数据类型间的相互转换 在C语言中&#xff0c;不同数据类型之间是可以混合运算的。当表达式中的数据类型不一致时&#xff0c;首先转换为同一类型&#xff0c;然后再进行计算。C语言有两种方式实现类型转换。一是自动类型转换&#xff0c;另外一种是强制类型转换。 转换的主…

2024GLEE生活暨教育(上海)博览会,8月20-22日,国家会展中心(上海)

2024GLEE生活暨教育(上海)博览会将于8月20-22日在中国国家会展中心&#xff08;上海&#xff09;举行&#xff0c;博览会总面积近万平方米&#xff0c;设有美好生活和教育产品两大主力展区&#xff0c;全面覆盖婴幼儿、学龄前、小学、初中、高中、大学、中年、老年各个年龄段的…

数据库复习重点

第一章通常涵盖数据库系统的基础概念&#xff0c;这里将概述数据库、数据库系统、数据库管理系统的基本概念&#xff0c;数据库系统的三级模式结构&#xff0c;以及数据模型的三要素。 基本概念 数据&#xff08;Data&#xff09;&#xff1a; 数据是描述事物的符号记录&#…

Nvidia Isaac Sim搭建仿真环境 入门教程 2024(4)

Nvidia Isaac Sim 入门教程 2024 版权信息 Copyright 2023-2024 Herman YeAuromix. All rights reserved.This course and all of its associated content, including but not limited to text, images, videos, and any other materials, are protected by copyright law. …

银行数仓项目实战(六)--基础层(完成存款的明细表---宽表)

文章目录 熟悉业务模型设计梳理映射关系加工宽表测试提交 FDM基础层&#xff1a;根据主题&#xff08;需求&#xff09;&#xff0c;将源数据加工集成&#xff0c;形成业务明细表–宽表 熟悉业务 当我们的工作来到基础层&#xff0c;我们首先要做的是跟甲方沟通&#xff0c;要…

未完工数据和系统数据对比分析

select * FROM ( select a.db_close_systime AS a_db_close_systime, -- 订单关闭时间 u.db_close_systime AS u_db_close_systime, -- 订单关闭时间 COALESCE( u.db_close_systime,a.db_close_systime) AS db_close_systime_coalesced ,-- 取非空值的订单关闭时间 a.i…

Harmony设计模式-单例模式

Harmony设计模式-单例模式 前言 软件设计模式&#xff08;[Design pattern](https://baike.baidu.com/item/Design pattern/10186718?fromModulelemma_inlink)&#xff09;&#xff0c;又称设计模式&#xff0c;是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经…

动态网页制作技术

动态网页制作技术是一种利用脚本语言、数据库和服务器端程序来生成动态内容的网页技术。以下是常用的动态网页制作技术&#xff1a; 1.PHP&#xff1a;PHP是一种广泛使用的服务器端脚本语言&#xff0c;可以嵌入到HTML中&#xff0c;用于生成动态网页内容。它可以与各种数据库进…

使用Kafka框架发送和接收消息(Java示例)

Kafka是一个开源的分布式流处理平台&#xff0c;以其在大数据和实时处理领域的广泛应用而闻名。以下是Kafka的关键特性以及它在消息传输方面的优势&#xff1a; 高吞吐量与低延迟&#xff1a;Kafka能够每秒处理数百万条消息&#xff0c;具有极低的延迟&#xff0c;这使得它非常…

前端调试技巧

1、利用console打印日志 2、利用debugger关键字&#xff0c;浏览器f12调用到方法debugger处会断点住&#xff0c;可以利用浏览器调试工具查看变量 a.监视表达式可以添加想要观察的变量 b.调用堆栈可以观察方法调用链 3、xhr断点 请求地址包含v1.0/banner_theme/pagelist&a…

Spacedrive:一个开源的跨平台文件管理器

文章目录 Spacedrive简介1.1 什么是Spacedrive&#xff1f;1.2 Spacedrive的核心功能1.3 Spacedrive的开发状态 Spacedrive的功能与特点2.1 文件存储在哪里&#xff1f;2.2 与传统文件管理器的区别2.3 与云存储服务的区别2.4 跨设备文件管理2.5 文件分类与过滤 Spacedrive的技术…