【每日一练】React完成列表渲染

2023-11-06

//React如何完成列表渲染?
//技术方案:我们用的是一个原生的map方法 重复渲染睡就return谁
//注意事项:遍历列表时同样需要一个类型为number/string不可重复的key 提高diff性能

const List = [
  { id: 1, name: '烧烤' },
  { id: 2, name: '按摩' },
  { id: 3, name: '洗脚' },
  { id: 4, name: '旅游' },
  { id: 5, name: '拍照' }
]

function App() {
  return (
    <div className="App">
     <ul>
       {List.map(item=><li key={item.id}>{item.name}</li>)}
     </ul>
    </div>
  )
}

export default App

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【每日一练】React完成列表渲染 的相关文章

随机推荐

  • 利用ThreadPoolTaskExecutor创建线程池,并实现数据透传

    1 线程池配置 Configuration public class ThreadPoolConfig cpu内核 暂时默认8核 private static final int CORE SIZE 8 核心线程数 暂定为I O密集型 pr
  • java 取出list 中一列_java8新特性 获取list某一列的操作

    提取某一列 以name为例 从对象列表中提取一列 以name为例 List nameList studentList stream map StudentInfo getName collect Collectors toList 提取后输
  • 大数据毕设项目 大数据电影数据分析与可视化系统 - python Django

    文章目录 0 前言 1 课题背景 2 效果实现 3 爬虫及实现 4 Flask框架 5 Ajax技术 6 Echarts 7 最后 0 前言 这两年开始毕业设计和毕业答辩的要求和难度不断提升 传统的毕设题目缺少创新和亮点 往往达不到毕业答辩
  • 字符串版本号比较(Java)

    APP的版本升级更新 会用到版本号的对比 根据版本号去解析埋点上报得信息 正则匹配方式解析版本号中字符和数字做对比 默认字符大于数字 版本号1 是否大于等于 版本号2 详见以下代码 Slf4j public class CompareUti
  • java修饰符权限

    java修饰符有public protected private和default 默认 四种访问级别 四类修饰符都用于类 类属属性及方法 1 访问权限 访问权限 类 包 子类 其他包 备注 public 可 可 可 可 包内及包外的任何类均
  • 锟斤拷?UTF-8与GBK互转,为什么会乱码?

    作为一名程序员 肯定有被乱码困扰的时候 真到了百思不得其解的时候 就会觉得 英文程序员真幸福 但其实只要明白编码之间的转换规律 其实乱码so easy 我们知道 计算机存储数据都是2进制 就是0和1 那么这么多的字符就都需要有自己对应的0和
  • Android 之 Fragment 精讲 —— 底部导航栏的实现 (方法1)

    本节引言 在上一节中我们对Fragment进行了一个初步的了解 学习了概念 生命周期 Fragment管理与 Fragment事务 以及动态与静态加载Fragment 从本节开始我们会讲解一些Fragment在实际开发 中的一些实例 而本节
  • redisson常用APi-Example

    中文文档目录 redisson中文文档目录 分布式对象 package com example redissondemo test import com example redissondemo RedissonDemoApplicatio
  • 算法题:求一维数组中出现频率最高的数字

    算法题 求一维数组中出现频率最高的数字 题目如下 一个一维整数数组 编程统计数组成员的出现频率 将出现频率最高的前N个数组成员输出来 题目如下 一个一维整数数组 编程统计数组成员的出现频率 将出现频率最高的前N个数组成员输出来 以下为代码段
  • ACM简介

    一 什么是ACM 计算机协会 英语 Association for Computing Machinery 简称ACM 是一个世界性的计算机从业员专业组织 创立于1947年 是世界上第一个科学性及教育性计算机学会 亦是现时全球最大的电脑相关
  • live555在Ubuntu上的编译及对于armLinux的交叉编译

    live555在Ubuntu上的编译及对于armLinux的交叉编译 版本说明 版本 作者 日期 备注 0 1 ZY 2019 3 7 初稿 目录 文章目录 live555在Ubuntu上的编译及对于armLinux的交叉编译 版本说明 目
  • C语言《超详细解析内存函数》

    文章目录 内存函数 一 memcpy函数 1 函数内容解析 2 memcpy模拟实现 3 memcpy函数说明 二 memmove函数 1 memmove内容解析 2 memmove模拟实现 3 memmove函数说明 三 memcmp函数
  • 一文搞懂二叉树(含C++基本算法实现)

    二叉树知识点 1 二叉树的定义 二叉树是一种树结构 每个节点最多有两个子节点 分别称为左子节点和右子节点 以下是使用C 生成二叉树的示例代码 include
  • Arcgis Engine + Visual Studio安装教程

    博客文章 https blog manchan top post arcgis engine visual studio 可在此处找到我 一 前言 ArcGIS Engine是美国Esri公司 Environmental Systems R
  • 【C++】中国农业大学C++语言程序设计(上)——数值计算【二】

    老师 阚道宏 数值计算 程序中的变量 变量 词法元素 语句 变量访问 程序中的常量 字面常量 指定常量的数据类型 符号常量 算数运算 表达式 位运算 赋值运算 数据的输入和输出 引用与指针 访问变量内存单元 引用 变量的别名 指针 变量的间
  • 计算机网络复习3---发送报文的连续确认

    书P216 217 这里看一下第3问 求有多少个字节 为什么不是91 而是90呢 因为 确认号190指希望下次从这个序号开始发送数据 所以第二个报文段最后一个序号应该是190 1 189 所以第二个报文段长度为90
  • C++ 服务器开发面试题整理(4)

    1 static cast dynamic cast const cast reinterpret cast的区别 1 const cast用于将const变量转为非const的 2 static cast用的最多 对于各种隐式转换 非co
  • https://github.com/stuntrally/stuntrally

    开源游戏
  • 线程池之 ThreadPoolExecutor

    网上一堆 ThreadPoolExecutor 的解读 有些可能还相互矛盾 其实 ThreadPoolExecutor类的注释中就有大量的说明 本文基于jdk1 8 0中代码注释加上自己的一点理解与实践 一 为什么使用线程池 线程池主要解决
  • 【每日一练】React完成列表渲染

    React如何完成列表渲染 技术方案 我们用的是一个原生的map方法 重复渲染睡就return谁 注意事项 遍历列表时同样需要一个类型为number string不可重复的key 提高diff性能 const List id 1 name