react中key的正确使用方式

image

在开发react程序时我们经常会遇到这样的警告,然后就会想到:哦!循环子组件忘记加key了~

出于方便,有时候会不假思索的使用循环的索引作为key,但是这样真的好吗?什么样的值才是key的最佳选择?

为了弄明白,本文将从三个方面来分析"key":

1.为什么要使用key

2.使用index做key存在的问题

3.正确的选择key

1.为什么要使用key

react官方文档是这样描述key的:

Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

react的diff算法是把key当成唯一id然后比对组件的value来确定是否需要更新的,所以如果没有key,react将不会知道该如何更新组件。

你不传key也能用是因为react检测到子组件没有key后,会默认将数组的索引作为key。

react根据key来决定是销毁重新创建组件还是更新组件,原则是:

  • key相同,组件有所变化,react会只更新组件对应变化的属性。
  • key不同,组件会销毁之前的组件,将整个组件重新渲染。

2.使用index做key存在的问题

2.1 受控组件

单纯的展示组件比如span,这些组件是受控组件,意味着他们的值将是我们给定好的。

如果子组件只是受控组件,使用index作为key,可能表面上不会有什么问题,实际上性能会受很大的影响。例如下面的代码:

// ['张三','李四','王五']=>
<ul>
    <li key="0">张三</li>
    <li key="1">李四</li>
    <li key="2">王五</li>
</ul>
// 数组重排 -> ['王五','张三','李四'] =>
<ul>
    <li key="0">王五</li>
    <li key="1">张三</li>
    <li key="2">李四</li>
</ul>

当元素数据源的顺序发生改变时,对应的:

key为0,1,2的组件都发生了变化,三个子组件都会被重新渲染。(这里的重新渲染不是销毁,因为key还在)

相反,我们使用唯一id作为key:

// ['张三','李四','王五']=>
<ul>
    <li key="000">张三</li>
    <li key="111">李四</li>
    <li key="222">王五</li>
</ul>
// 数组重排 -> ['王五','张三','李四'] =>
<ul>
    <li key="222">王五</li>
    <li key="000">张三</li>
    <li key="111">李四</li>
</ul>

根据上面的更新原则,子组件的值和key均未发生变化,只是顺序发生改变,因此react只是将他们做了移动,并未重新渲染。

2.2 非受控组件

像input这样可以由用户任意改变值,不受我们控制的组件,在使用了index作为key时可能会发生问题,看如下的栗子:

子组件:

  render() {
    return (
      <div>
        <p >值:{this.props.value}</p>
        <input />
      </div>
    );
  }
}

父组件

{
this.state.data.map((element, index) => {
    return <Child value={element} key={index} />
    })
}

我们在前两个输入框分别输入对应的值:

image

然后在头部添加一个元素:

image

很明显,这个结果并不符合我们的预期,我们来分析一下发生了什么:

<div key="0">
    <p >值:0</p>
    <input />
</div>
<div key="1">
    <p >值:1</p>
    <input />
</div>
<div key="2">
    <p >值:2</p>
    <input />
</div>

变化后:

<div key="0">
    <p >值:5</p>
    <input />
</div>
<div key="1">
    <p >值:0</p>
    <input />
</div>
<div key="2">
    <p >值:1</p>
    <input />
</div>
<div key="3">
    <p >值:2</p>
    <input />
</div>

可以发现:key 0,1,2并没有发生改变,根据规则,不会卸载组件,只会更新改变的属性。

react只diff到了p标签内值的变化,而input框中的值并未发生改变,因此不会重新渲染,只更新的p标签的值。

当使用唯一id作为key后:

image

<div key="000">
    <p >值:0</p>
    <input />
</div>
<div key="111">
    <p >值:1</p>
    <input />
</div>
<div key="222">
    <p >值:2</p>
    <input />
</div>

变化后:

<div key="555">
    <p >值:5</p>
    <input />
</div>
<div key="000">
    <p >值:0</p>
    <input />
</div>
<div key="111">
    <p >值:1</p>
    <input />
</div>
<div key="222">
    <p >值:2</p>
    <input />
</div>

可以很明显的发现:key为 111,222,333的组件没有发生任何改变,react不会更新他们,只是新插入了子组件555,并改变了其他组件的位置。

3.正确的选择key

3.1 纯展示

如果组件单纯的用于展示,不会发生其他变更,那么使用index或者其他任何不相同的值作为key是没有任何问题的,因为不会发生diff,就不会用到key。

3.2 推荐使用index的情况

并不是任何情况使用index作为key会有缺陷,比如如下情况:

你要分页渲染一个列表,每次点击翻页会重新渲染:

使用唯一id:

第一页
<ul>
    <li key="000">张三</li>
    <li key="111">李四</li>
    <li key="222">王五</li>
</ul>
第二页
<ul>
    <li key="333">张三三</li>
    <li key="444">李四四</li>
    <li key="555">王五五</li>
</ul>

翻页后,三条记录的key和组件都发生了改变,因此三个子组件都会被卸载然后重新渲染。

使用index:

第一页
<ul>
    <li key="0">张三</li>
    <li key="1">李四</li>
    <li key="2">王五</li>
</ul>
第二页
<ul>
    <li key="0">张三三</li>
    <li key="1">李四四</li>
    <li key="2">王五五</li>
</ul>

翻页后,key不变,子组件值发生改变,组件并不会被卸载,只发生更新。

3.3 子组件可能发生变更/使用了非受控组件

大多数情况下,使用唯一id作为子组件的key是不会有任何问题的。

这个id一定要是唯一,并且稳定的,意思是这条记录对应的id一定是独一无二的,并且永远不会发生改变。

不推荐使用math.random或者其他的第三方库来生成唯一值作为key。

因为当数据变更后,相同的数据的key也有可能会发生变化,从而重新渲染,引起不必要的性能浪费。

如果数据源不满足我们这样的需求,我们可以在渲染之前为数据源手动添加唯一id,而不是在渲染时添加。


code秘密花园
基础知识、算法、原理、项目、面试。公众号code秘密花园

Reading makes a full man, conference a ready man, and writing an exact man.

10k 声望
7.7k 粉丝
0 条评论
推荐阅读
Facebook 新一代 React 状态管理库 Recoil
在 React Europe 2020 Conference 上, Facebook 软件工程师 Dave McCabe 介绍了一个新的状态管理库 Recoil。

ConardLi15阅读 6.5k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木144阅读 12k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy45阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木63阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图

Reading makes a full man, conference a ready man, and writing an exact man.

10k 声望
7.7k 粉丝
宣传栏