写动态子组件时, 如果没有给动态子项添加 key prop, 则会报一个警告:
warning:Each child in an array or iterator should have a unique "key" prop.Check the render method of 'APP'. See .......
这个警告指的是, 如果每一个组件是一个数组或迭代器的话, 那么必须有一个唯一的 key prop. 那么这个 key prop 是做什么的?
思考. jpg
1.react 利用 key 来识别组件, 它是一种身份标识. keys 是 react 用于追踪哪些列表中元素被修改, 被添加或者被移除的辅助标识.
2.react 根据 key 来决定是销毁重新创建组件还是更新组件
key 相同, 若组件属性有所变化, 则 react 只更新组件对应的属性, 没有变化则不更新.
key 不同, 则 react 先销毁该组件 (有状态组件的 componentWillUnmount 会执行), 然后重新创建该组件 (constructor 和 componentWillUnmount 都会执行)
下面我们来根据实际场景思考它的用处.
想象一下, 假如需要渲染一个有 5000 项的成绩排名榜单, 而且每隔几秒就会更新一次的排名, 其中大部分排名只是位置变了, 还有少部分的是完全更新了, 少部分则是清出榜单了.
此时 key 就发挥作用了, 它是用来表示当前项的唯一性的 props. 现在尝试来描述这一场景, 下面是一份学生的成绩数组:
- [{
- sid:'600011',
- name:'Tom'
- },{
- sid:'600012',
- name:'Sam'
- },{
- sid:'600013',
- name:'Echo'
- }]
其中, sid 是学号, name 是名字. 那么, 我们来实现成绩排名的榜单:
- import React from 'react';
- function Rank({list}){
- return (
- <ul>
- {list.map((entry, index)=>(
- <li key={index}>{entry.name}</li>
- ))}
- </ul>
- );
- }
我们把 key 设成了序号, 这么做的确不会报警告了, 但这是非常低效的做法. 我们在生产环境下常常犯这样的错, 这个 key 是每次用来做 Virtual DOm diff 的, 每个学生都用序号来更新的问题是它没有和同学的唯一信息相匹配, 相当于用了一个随机键, 那么不论有没有相同的项, 更新都会重新渲染.
正确的做法也可以很简单, 只需要把 key 的内容换成 sid 就可以了:
- import React from 'react';
- function Rank({list}){
- return (
- <ul>
- {list.map((entry, index)=>(
- <li key={entry.sid}>{entry.name}</li>
- ))}
- </ul>
- );
- }
来源: http://www.jianshu.com/p/ff95e359aa5c