react 列表渲染
https://reactjs.org/docs/lists-and-keys.html#keys
以下代码运行会报错：Warning: Each child in an array or iterator should have a unique 'key' prop.
const arr = [<li>{numbers[0]}</li>,<li>{numbers[0]}</li>,<li>{numbers[1]}</li>]
return (
<ul>{arr}</ul>
);
改成这样子，就不会报错了：
return (
<ul>
<li>{numbers[0]}</li>
<li>{numbers[0]}</li>
<li>{numbers[1]}</li>
</ul>
);
以上的区别是什么？
当 渲染一个数组 的时候，必须要为数组中的单元设置一个key属性，这是react的要求。用于让react去跟踪数组元素的增加和删除、移动等，这是key唯一的作用。当元素从数组中读取出来时，react没办法直接跟踪，需要通过key。
对key的要求
要添加在数组item元素的根元素上，而且对于当前数组来说是唯一和稳定的，可以采用如下方式来生成id：
var shortid = require('shortid');
function createNewTodo(text) {
return {
completed: false,
id: shortid.generate(),
text
}
}
key可以使用索引，但不推荐，因为这可能会使列表展示错误的数据，以下来演示一下：
class List extends React.Component{
constructor(props){
super(props)
this.state = {
arr:[9,8,7]
}
this.changeArr = this.changeArr.bind(this);
}
changeArr(){
this.setState((preState)=>{
preState.arr.unshift(10);
return {
arr:preState.arr
}
})
}
render(){
return (
<div>
<button onClick={this.changeArr}>change</button>
<ul>
{this.state.arr.map((item,index) =>
<li key={item}>
{item} <input />
</li>
)}
</ul>
</div>
)
}
}
在线运行：https://codepen.io/gaearon/pen/jrXYRR?editors=0011，以上input的作用是记录dom的状态，可以简单判断dom有没有被重新创建
测试发现规律如下：
不指定key，控制台出现warning，默认以index为key，显式指定key=index，则不报warning，但运行的效果和不指定一样，因为默认都是index为key【这和vue一致，都是默认“就地复用”，以上相同的测试对于vue结果一致】。
当render的时候，对比前后两个虚拟dom，发现key一样则复用这个dom，即刷新后，被复用dom的状态依然和render前一样【以上的input输入的值会保留】
如果key中出现相同的值（假设为5），则第一个key为5的dom会复用之前的dom，而后一个key为5的则创建新的dom
key的作用是跟踪数组中dom的变化，
我提出的问题：
https://stackoverflow.com/questions/48032286/the-detail-in-react-list-render
https://segmentfault.com/q/1010000012649420
补充vue的测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="this.change">change</button>
<div v-for="(item ,index) in arr" :key="item"> {{item}}
<input type="text">
</div>
</div>
</body>
<script>
const vm = new Vue({
el:"#root",
data:{
arr:[1,2,3],
},
methods:{
change:function(){
vm.arr.unshift(1)
}
}
});
</script>
</html>
ps：vue1中出现相同元素，如[1,2,1]，会报错，vue2以后不会了，指定的key只能是原始类型，而不能是对象类型
react 列表渲染的更多相关文章
- react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
- React 学习(五) ---- 条件和列表渲染
条件渲染 React中的条件渲染和我们平常写的js 代码一样,都是用的if else, 只不过在if else 中它的返回值是jsx, 根据不同的条件渲染不同的UI. 先写两个组件 //登录的用户显示 ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- React:快速上手(3)——列表渲染
React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...
- react 也就这么回事 02 —— JSX 插值表达式、条件渲染以及列表渲染
我们已经学会了 React 创建元素和渲染元素 ReactDOM.render(<div>Hello React!</div>, document.getElementById ...
- react+redux渲染性能优化原理
大家都知道,react的一个痛点就是非父子关系的组件之间的通信,其官方文档对此也并不避讳: For communication between two components that don't ha ...
- 2017.11.7 ant design - upload 组件的使用， react 条件渲染以及 axios.all() 的使用
一.主要任务:悉尼小程序管理后台,添加景点页面的开发 二.所遇问题及解决 1. 上传多个不同分类音频信息时,如中文音频和英文音频,要求音频不是放在一个数组中的,每个音频是一个独立的字段,此时: < ...
- 玩转 React 服务器端渲染
React 提供了两个方法 renderToString 和 renderToStaticMarkup 用来将组件(Virtual DOM)输出成 HTML 字符串,这是 React 服务器端渲染的基 ...
- React 服务器渲染原理解析与实践
第1章 服务器端渲染基础本章主要讲解客户端与服务器端渲染的概念,分析客户端渲染和服务器端渲染的利弊,带大家对服务器端渲染有一个粗浅认识. 1-1 课程导学1-2 什么是服务器端渲染1-3 什么是客户端 ...
随机推荐
- JAVA常用知识总结（十三）——数据库（三）
Mysql的主键选择(主键自增,UUID,snowflake)? 使用自增长做主键的优点:1.很小的数据存储空间2.性能最好3.容易记忆使用自增长做主键的缺点:1.如果存在大量的数据,可能会超出自增长 ...
- freertos之任务
taskYIELD(): 通知调度器自己放弃运行态,可立即进行任务切换,而不必等到当前任务的时间片耗尽.这对于相同任务优先级的2个任务来说可加速效率.
- 配置Gradle构建
构建基础配置 Android Studio包含一个顶级的构建文件和每个模块的构建文件.构建文件被称为 build.gradle,它是一个纯文本文件,它使用Groovy语法来配置由Android Gra ...
- js获取窗口参数
window.onscroll=function getScrollTop(){ console.log(scrollTop) if(document.documentElement&& ...
- php pack、unpack、ord 函数使用方法（二进制流接口应用实例）
在工作中,我也逐渐了解到pack,unpack,ord对于二进制字节处理的强大. 下面我逐一介绍它们.在我们工作中,用到它们的估计不多. 我在最近一个工作中,因为通讯需要用到二进制流,然后接口用php ...
- 【转】onAttachedToWindow()在整个Activity生命周期的位置及使用
上篇博客实现圆角对话框样式的Activity中提到,若需实现圆角对话框Activity,需要在Activity的onAttachedToWindow()函数中做文章,那么就想问: onAttached ...
- VBA小记
要放假了,可是我们,我还是煎熬! 最让人不爽的是媳妇也需要加班加点的完成一些看起来很EASY的事: 统计数据,把几个表合并…… EXCEL本人还是懂得一点点的(我不想说我是学计算机的,我怕给学计算机的 ...
- DRP项目
DRP(distribution resource planning)分销资源计划是管理企业的分销网络的系统,目的是使企业具有对订单和供货具有快速反应和持续补充库存的能力.解决了随着企业销售规模的逐渐 ...
- Redis学习笔记（一）五种数据类型
1.字符串(String) 基本操作:SET(设置).GET(获取).DEL(删除)其他操作传送门 root@localhost:~# redis-cli > set msg hello OK ...
- 为什么字符串String是不可变字符串&&"".equals(str)与str.equals("")的区别
为什么字符串String是不可变字符串 实际上String类的实现是char类型的数组 虽然说源码中设置的是private final char[] value; final关键词表示不可变动 但是只 ...