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


Posted in Javascript onAugust 22, 2017

前言

本文主要给大家介绍了关于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>
 );
}

总结

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

Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
prototype 学习笔记整理
Jul 17 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 #Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 #Javascript
jQuery实现广告条滚动效果
Aug 22 #jQuery
基于jQuery的表单填充实例
Aug 22 #jQuery
JS倒计时实例_天时分秒
Aug 22 #Javascript
老生常谈javascript的面向对象思想
Aug 22 #Javascript
使用jQuery实现简单的tab框实例
Aug 22 #jQuery
You might like
PHP学习之数组值的操作
2011/04/17 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
Python发送Email方法实例
2014/08/21 Python
python修改字典内key对应值的方法
2015/07/11 Python
Python画图学习入门教程
2016/07/01 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
200行python代码实现2048游戏
2019/07/17 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
小学班主任评语
2014/12/29 职场文书
酒会邀请函
2015/01/31 职场文书
大学生求职信怎么写
2015/03/19 职场文书
企业催款函范本
2015/06/24 职场文书
创业计划书之服装
2019/10/07 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记