阅读 4672

笔记:React 中关于 key 的一点总结

为什么要使用 key

Motivation

When you use React, at a single point in time you can think of the render() function as creating a tree of React elements. On the next state or props update, that render() function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.

:当您使用React时,您可以在单个时间点将该render()函数视为创建React元素树。在下一个状态或道具更新时,该render()函数将返回一个不同的React元素树。然后,React需要弄清楚如何有效地更新UI以匹配最新的树。

这里涉及到两个算法复杂度的问题,总而言之就是:

  • 不同类型的两个元素将产生不同的tree
  • 开发人员可以通过 key 来暗示哪些子元素可以在不同的渲染中保持稳定

key 是如何工作的?

react中的key属性是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的

react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。每个key对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建。

Markdown

this.state = {
 users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  <div>
    <h3>用户列表</h3>
    {this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
  </div>
 )
);
复制代码

上面代码在dom渲染挂载后,用户列表只有张三和李四两个用户,王五并没有展示处理,主要是因为react根据key认为李四和王五是同一个组件,导致第一个被渲染,后续的会被丢弃掉。

key的值必须保证唯一且稳定

这样,有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件。

  • key相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新

  • key值不同,则react先销毁该组件(有状态组件的componentWillUnmount会执行),然后重新创建该组件(有状态组件的constructorcomponentWillUnmount都会执行)

Markdown

还没完( 我再简单说两句 ),在项目开发中,key属性的使用场景最多的还是由数组动态创建的子组件的情况,需要为每个子组件添加唯一的key属性值

index 的使用

在list数组中,用key来标识数组创建子组件时,我的通常做法:

{this.state.data.map((v,idx) => <Item key={idx} v={v} />)}
// index 作为key方便快捷一步到位
<ul>
    <li key="0">a <input type="text"/></li>
    <li key="1">b <input type="text"/></li>
    <li key="2">c <input type="text"/></li>
</ul>
复制代码

但是···

若涉及到数组的动态变更,例如数组新增元素、删除元素或者重新排序等,这时index作为key会导致展示错误的数据。

{this.state.data.map((v,idx) => <Item key={idx} v={v} />)}
// 开始时:['a','b','c']=>
<ul>
    <li key="0">a <input type="text"/></li>
    <li key="1">b <input type="text"/></li>
    <li key="2">c <input type="text"/></li>
</ul>

// 数组重排 -> ['c','b','a'] =>
<ul>
    <li key="0">c <input type="text"/></li>
    <li key="1">b <input type="text"/></li>
    <li key="2">a <input type="text"/></li>
</ul>

复制代码

上面实例中在数组重新排序后,key对应的实例都没有销毁,而是重新更新。具体更新过程我们拿key=0的元素来说明, 数组重新排序后:

  • 组件重新render得到新的虚拟dom

  • 新老两个虚拟dom进行diff,新老版的都有key=0的组件,react认为同一个组件,则只可能更新组件;

  • 然后比较其children,发现内容的文本内容不同(由a--->c),而input组件并没有变化,这时触发组件的componentWillReceiveProps方法,从而更新其子组件文本内容;

  • 因为组件的childreninput组件没有变化,其又与父组件传入的任props没有关联,所以input组件不会更新(即其componentWillReceiveProps方法不会被执行),导致用户输入的值不会变化。

这就是index作为key存在的问题,index作为key是一种反模式, 不要轻易使用index作为key。(若数组的内容只是作为纯展示,而不涉及到数组的动态变更,还是很推荐的。)

Markdown

官网的两个demo: demo1, demo2, 大家可以去看看。

index 的替代

归根结底,使用index的问题在于两次渲染的index是相同的,导致key也是相同的,回到上面👆的总结 :key相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新

这时候,如果保证每次的 key 不同,问题不就解决了么?

于是乎···

key={index +  Math.random()}
复制代码

一行神奇的代码就产生了。

能解决问题么?能!是最优的么?不是。

Markdown

翻看 官方文档 , 官方文档中明确指出 Don’t pass something like Math.random() to keys

key应该是稳定的,可预测的和独特的。不稳定的key(如由其生成的key Math.random())将导致许多组件实例和DOM节点被不必要地重新创建,这可能导致性能下降和子组件中的丢失状态。

所以,在不能使用random随机生成key时,我们可以像下面这样用一个全局的localCounter变量来添加稳定唯一的key值。

var localCounter = 1;
this.data.forEach(el=>{
    el.id = localCounter++;
});
//向数组中动态添加元素时,
function createUser(user) {
    return {
        ...user,
        id: localCounter++
    }
}
复制代码

所以,我最后的解决方案是全局定义一个变量:let ONE = 1;,然后在组件中使用 key = {ONE++} 。这样 setSete() 的时候每次key都产生了变化,也一定程度上避免了key的不稳定性质。问题解决,收工。

Markdown

补充一下问题场景:

当时遇到的问题是:需要改变的是内层组件的属性,而key 设定在外层子组件上面。最开始使用 index 作为 key , 两次渲染对外层子组件来说 index 是相同的,所以react 找到外层子组件识别到 key = index , 发现 key 没变化。key 相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新。外层子组件上其实并没有属性改变,改变的属性是位于内层组件上。所以 react 找到外层子组件就终止了。内层子组件相当于还是没渲染到。

参考:

React之key详解

React中文文档 key

React中文文档 key

文章分类
前端