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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
javascript 回调函数详解
2014/11/11 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
使用pip安装python库的多种方式
2019/07/31 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
档案管理员岗位职责
2013/12/01 职场文书
文案策划专业自荐信
2014/07/07 职场文书
团员年度个人总结
2015/02/26 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server