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 什么是客户端 ...
随机推荐
- go系列（5）- beego自己写controller
前边的系列文章已经讲述了如何安装环境, beego的处理逻辑都是在Controller里面完成的,下面就写一个最简单的Controller. 我们在写自己的controller的时候,一定要继承bee ...
- Serervlet | 两种跳转方式
https://www.cnblogs.com/fanhc/archive/2012/09/21/2696343.html response.sendRedirect是向客户浏览器发送页面重定向指令, ...
- $.each(obj,function(index,value)遍历的学习
JQuery遍历对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 如何在VirtualBox虚拟机中安装XP系统？ 转
关闭VM (windows 7 )的方法, 使用 退出 保持状态 开启VM (windows 7 )的方法, 选择启动 ######Iissue 1 网络连接不上,可以重新初始化 网络连接. #### ...
- Mysql 事务隔离级别(图文详解)
本文由 SnailClimb 和 BugSpeak 共同完成. 事务隔离级别(图文详解) 什么是事务? 事物的特性(ACID) 并发事务带来的问题 事务隔离级别 实际情况演示 脏读(读未提交) 避免脏 ...
- session 跟 cookie 关系
面试经验: 谈到Session的时候就侃Session和Cookie的关系:Cookie中的SessionId. 和别人对比说自己懂这个原理而给工作带来的方便之处. 客户第一次发送请求给服务器,此 ...
- BundleConfig包含js，css失败
今天在做mvc项目的时候,引入了bootstrap样式.但是包含css和js的时候出错了 于是我查阅资料,好多人都说后缀名前面不能包含".",于是我把min前面的".&q ...
- Java中的变量——通过示例学习Java编程（4）
作者:CHAITANYA SINGH 来源:https://www.koofun.com/pro/kfpostsdetail?kfpostsid=14&cid= 变量是用来存放可以更改的值的容 ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- hihocoder1860 最大异或和
思路: 把N个前缀异或和插入一棵trie树中,然后对每个前缀异或和x计算能使x ^ y最大的前缀异或和y.利用了异或运算的a ^ b ^ a = b的性质. 参考了https://cloud.tenc ...