React学习笔记之列表渲染示例详解

前言

本文主要给大家介绍了关于React列表渲染的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

示例详解：

列表渲染也很简单，利用map方法返回一个新的渲染列表即可，例如：

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

基础列表组件的构造中，有一个重要的属性值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的指定需要是其值是唯一的，因为它能帮助框架更好的识别列的改变，添加和删除，如果有稳定的唯一键值就使用唯一键值，如果没有可以使用index来进行标识，但是不提倡在列表会进行频繁排序的时候使用index，因为这样会使得性能下降。

例如：

const todoItems = todos.map((todo) =>
 <li key={todo.id}>
 {todo.text}
 </li>
);
const todoItems = todos.map((todo, index) =>
 // Only do this if items have no stable IDs
 <li key={index}>
 {todo.text}
 </li>
);

出来以上用map构造好列表外，map的语法还可以内嵌到jsx语法中，只要加上{}即可，写法多种多样，可以选一种自己顺眼的哦，呵呵哒。

例如以下两种写法是一样滴:

function NumberList(props) {
 const numbers = props.numbers;
 const listItems = numbers.map((number) =>
 <ListItem key={number.toString()}
    value={number} />
 );
 return (
 <ul>
  {listItems}
 </ul>
 );
}

function NumberList(props) {
 const numbers = props.numbers;
 return (
 <ul>
  {numbers.map((number) =>
  <ListItem key={number.toString()}
     value={number} />
  )}
 </ul>
 );
}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • React服务端渲染（总结）

    React服务端渲染（总结）

    一.前言 为什么需要服务端渲染?什么情况下进行服务端渲染?笔者认为,当我们要求渲染时间尽量快.页面响应速度快时(优点),才会采用服务器渲染,并且应该"按需"对页面进行渲染 --"首次加载/首屏".即服务端渲染的优势在于:由中间层( node端 )为客户端请求初始数据.并由node渲染页面.那客户端渲染和服务端渲染有什么差别?服务端渲染究竟快在哪里呢? 二.原因与思路 客户端渲染路线:1. 请求一个html -> 2. 服务端返回一个html -> 3.

  • React学习笔记之条件渲染（一）

    前言 在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态).下面就来看看详细的介绍: 条件渲染 可以根据state的值进行组件的条件渲染.例如: function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; }

  • React学习笔记之列表渲染示例详解

    前言 本文主要给大家介绍了关于React列表渲染的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 示例详解: 列表渲染也很简单,利用map方法返回一个新的渲染列表即可,例如: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}<

  • Python3学习笔记之列表方法示例详解

    前言 本文主要给大家介绍了关于Python3列表方法的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1 使用[]或者list()创建列表 user = [] user = list() 2 使用list() 可以将其他类型转换成列表 # 将字符串转成列表 >>> list('abcde') ['a', 'b', 'c', 'd', 'e'] # 将元祖转成列表 >>> list(('a','b','c')) ['a', 'b', 'c']

  • JavaScript学习笔记之惰性函数示例详解

    前言 本文主要给大家介绍了关于JavaScript惰性函数的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 需求 我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意是首次. 解决一:普通方法 var t; function foo() { if (t) return t; t = new Date() return t; } 问题有两个,一是污染了全局变量,二是每次调用 foo 的时候都需要进行一次判断. 解决二:闭包 我们很容易想到用闭

  • React Native 的动态列表方案探索详解

    React Native 的动态列表方案探索详解

    目录 背景 技术方案介绍 内存 异常处理 未来规划 背景 时至2022,精细化运营已经成为了各大App厂商的强需求,阿里的 DinamicX.Tangram 大家应该都很熟悉了,很多App厂商也自研了一些类似框架,基于DSL的动态化方案虽然有性能上的一些优势,但是毕竟不是图灵完备,一些需要逻辑动态下发的需求实现成本偏高,或由于DSL本身限制无法实现,针对这个问题我们使用RN进行了一下探索尝试, 利用我们已经相对完善的RN基建,结合客户端列表能力低成本的实现了一套的动态化能力,同时兼顾一定的性能体

  • C#学习笔记- 随机函数Random()的用法详解

    Random.Next() 返回非负随机数: Random.Next(Int) 返回一个小于所指定最大值的非负随机数 Random.Next(Int,Int) 返回一个指定范围内的随机数,例如(-100,0)返回负数 1.random(number)函数介绍 见帮助文档,简单再提一下,random(number)返回一个0~number-1之间的随机整数.参数number代表一个整数. 示例: trace(random(5)); 2.Math.random() 见帮助文档.返回一个有14位精度的

  • 人工智能学习Pytorch梯度下降优化示例详解

    人工智能学习Pytorch梯度下降优化示例详解

    目录 一.激活函数 1.Sigmoid函数 2.Tanh函数 3.ReLU函数 二.损失函数及求导 1.autograd.grad 2.loss.backward() 3.softmax及其求导 三.链式法则 1.单层感知机梯度 2. 多输出感知机梯度 3. 中间有隐藏层的求导 4.多层感知机的反向传播 四.优化举例 一.激活函数 1.Sigmoid函数 函数图像以及表达式如下: 通过该函数,可以将输入的负无穷到正无穷的输入压缩到0-1之间.在x=0的时候,输出0.5 通过PyTorch实现方式

  • react中使用antd及immutable示例详解

    react中使用antd及immutable示例详解

    目录 一.react中使用antd组件库 二.Immutable 2.1 深拷贝和浅拷贝的关系 2.2 immutable优化性能方式 2.3 immutable的Map使用 2.4 immutable的List使用 2.5 实际场景formJS 三.redux中使用immutable 一.react中使用antd组件库 运行命令create-react-app antd-react创建新项目: 运行命令npm i antd安装: 使用: import React from 'react' im

  • React 模式之纯组件使用示例详解

    React 模式之纯组件使用示例详解

    目录 什么是纯组件 纯组件解决了什么问题 怎么使用纯组件 CC: shouldComponentUpdate() 和 React.PureComponent FC: React.memo() 你可能并不需要纯组件 什么是纯组件 纯组件(Pure Component)这概念衍生自纯函数.纯函数指的是返回结果只依赖于传入的参数,且对函数作用域外没有副作用的函数.这种函数在相同参数下,返回结果是不变的.纯函数的返回值能被安全地缓存起来,在下次调用时,跳过函数执行,直接读取缓存.因为函数没有外部副作用,

  • react 组件实现无缝轮播示例详解

    react 组件实现无缝轮播示例详解

    目录 正文 无缝轮播 实现思路 构思使用时代码结构 Carousel组件 CarouselItem组件 完善组件 完成小圆点 正文 需求是做一个无缝轮播图,我说这不是有很多现成的轮子吗?后来了解到他有一个特殊的需求,他要求小圆点需要在轮播图外面,因为现在大部分插件都是将小圆点写在轮播图内部的,这对于不了解插件内部结构的小伙伴确实不知道如何修改. 很久没有写插件的我准备写一个插件(react) 无缝轮播 无缝轮播从最后一张到第一张的过程中不会原路返回,它就像轮子似的,从结束到开始是无缝连接的,非常

  • React.memo函数中的参数示例详解

    React.memo函数中的参数示例详解

    目录 React.memo?这是个啥? React.memo的第一个参数 父组件 子组件 React.memo优化 React.memo的第二个参数 父组件 子组件 React.memo优化 父组件 子组件 小结 React.memo?这是个啥? 按照官方文档的解释: 如果你的函数组件在给定相同 props 的情况下渲染相同的结果,那么你可以通过将其包装在 React.memo 中调用,以此通过记忆组件渲染结果的方式来提高组件的性能表现.这意味着在这种情况下,React 将跳过渲染组件的操作并直

随机推荐