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实现多域名不同文件的调用方法
Jan 12 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
javascript实现微信分享
Dec 23 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
layui使用及简单的三级联动实现教程
Dec 01 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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
一个分页的论坛
2006/10/09 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
JS高级笔记
2011/07/13 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
详解Angular cli配置过程记录
2019/11/07 Javascript
python解析xml文件实例分享
2013/12/04 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
django实现用户注册实例讲解
2019/10/30 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
django实现模型字段动态choice的操作
2020/04/01 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
大课间活动制度
2014/01/18 职场文书
家长对老师的感言
2014/03/11 职场文书
市级文明单位申报材料
2014/05/07 职场文书
2014年政工师工作总结
2014/12/18 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
学术研讨会主持词
2015/07/04 职场文书
安全生产协议书
2016/03/22 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL