react中使用index作为key值会怎样?
发布日期:2021-05-20 10:07:00 浏览次数:8 分类:技术文章

本文共 1765 字,大约阅读时间需要 5 分钟。

key

写动态子组件的时候,如果没有给动态子项添加 key prop,则会报一个警告:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'App'. See https://fb.me/react-warning-keys for more information.

这个警告指的是,如果每一个子组件是一个数组或迭代器的话,那么必须有一个唯一的 key prop。
这个 key prop 究竟是做什么的呢?

组件性能优化

我们想象一下,假如需要渲染一个有 5000 项的成绩排名榜单,而且每隔几秒就会更新一次
排名,其中大部分排名只是位置变了,还有少部分的是完全更新了,少部分则是清出榜单了。
此时 key 就发挥作用了,它是用来标识当前项的唯一性的 props。现在尝试来描述这一场景,
我们有一份学生的成绩数组:

[{

 sid: '600211',  name: 'Cam', }, {
 sid: '600243',  name: 'Arcthur', }, {
 sid: '600225',  name: 'Echo', }] 其中,sid 是学号,name 是名字。那么,我们来实现成绩排名的榜单:import React from 'react'; function Rank({
list }) {
 return (  
      {    list.map((entry, index) => (   {entry.name}  ))}  
  ); }

我们把 key 设成了序号,这么做的确不会报警告了,但这是非常低效的做法。我们在生产环
境下常常犯这样的错误,这个 key 是每次用来做 Virtual DOM diff 的,每一位同学都用序号来更
新的问题是它没有和同学的唯一信息相匹配,相当于用了一个随机键,那么不论有没有相同的项,
更新都会重新渲染。
正确的做法也很简单,只需要把 key 的内容换成 sid 就可以了:

import React from 'react'; function Rank({

list }) {
 return (  
      {    list.map((entry, index) => (   {entry.name}  ))}  
  ); }

当 key 相同时,React 会怎么渲染呢?答案是只渲染第一个相同 key 的项,且会报一个警告:

Warning: flattenChildren(…): Encountered two children with the same key, `.$a`. Child keys must be unique; when two children share a key, only the first child will be used.

因此,对 key 有一个原则,那就是独一无二,且能不用遍历或随机值就不用,除非列表内容
也并不是唯一的表示,且没有可以相匹配的属性。
关于 key,我们还需要知道的一种情况是,有两个子组件需要渲染的时候,我们没法给它们
设 key。这时需要用到 React 插件 createFragment 来解决:

import React from 'react'; import createFragment from 'react-addons-create-fragment'; function Rank({

first, second }) {
 const children = createFragment({
 first: first,  second: second,  });  return (  
      {    children}  
  ); }

上述代码中,first 和 second 两个 prop 的 key 就是我们设置对象的 key。

转载地址:https://blog.csdn.net/weixin_45416217/article/details/113136380 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:React -JSX中样式的像素值还需要加上px吗?
下一篇:React 合成事件与 JavaScript 原生事件对比

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.191.171.12]2022年08月11日 04时43分28秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章