笔记：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对应组件都不会被创建。
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会执行)，然后重新创建该组件（有状态组件的constructor和componentWillUnmount都会执行）
还没完( 我再简单说两句 )，在项目开发中，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方法，从而更新其子组件文本内容;因为组件的
children中input组件没有变化，其又与父组件传入的任props没有关联，所以input组件不会更新(即其componentWillReceiveProps方法不会被执行)，导致用户输入的值不会变化。
这就是index作为key存在的问题，index作为key是一种反模式, 不要轻易使用index作为key。(若数组的内容只是作为纯展示，而不涉及到数组的动态变更，还是很推荐的。)
官网的两个demo: demo1, demo2, 大家可以去看看。
index 的替代
归根结底，使用index的问题在于两次渲染的index是相同的，导致key也是相同的，回到上面????的总结 ：key相同，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新。
这时候，如果保证每次的 key 不同，问题不就解决了么？
于是乎···
key={index + Math.random()} 复制代码一行神奇的代码就产生了。
能解决问题么？能！是最优的么？不是。
翻看 官方文档 ， 官方文档中明确指出 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的不稳定性质。问题解决，收工。
补充一下问题场景：
当时遇到的问题是：需要改变的是内层组件的属性，而
key设定在外层子组件上面。最开始使用index作为key, 两次渲染对外层子组件来说 index 是相同的，所以react 找到外层子组件识别到key = index, 发现key没变化。key相同，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新。外层子组件上其实并没有属性改变，改变的属性是位于内层组件上。所以react找到外层子组件就终止了。内层子组件相当于还是没渲染到。
作者：宫商角徵羽
链接：https://juejin.cn/post/6844903700209598477