React中列表渲染的问题

能够善待自己不太喜欢的人，并不代表你虚伪，而意味着你内心成熟到可以容纳下这些。

在 React 的开发工作中，应该都遇到过这个警告：

Warning: Each child in a list should have a unique “key” prop.
（列表中的每个子元素都应该包含一个特殊的key属性。）

在这里，我们回顾一下React的基本知识：

React元素

• React元素：通过JSX或者(直接调用React.createElement()）所创建的元素都属于React元素。
• React元素是React应用的最小组成部分。
• 与浏览器的DOM元素不同，React元素就是一个普通的JS对象，且创建的开销很小。
• React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。
• React元素最终会被React的虚拟DOM转换为真实的DOM元素

React的渲染render()

每当调用render()时，页面就会发生重新渲染，
React会通过diffing算法，将新的元素和旧的元素进行比较。
通过比较找到发生变化的元素，并且只对变化的元素进行修改，没有发生的变化不予处理。

React元素一旦创建就无法修改，只能通过新创建的元素来替换.(这里不用担心性能，因为render()时会采用diff算法优化)

---

回到最初的列表渲染问题，我们就明白key属性的作用：帮助React识别哪些元素被修改。
官方的回答,具体内容我们可以参考: 深入解析为什么 key 是必须的

React 引入了 key 属性。当子元素拥有 key 时，React 使用 key 来匹配原有树上的子元素以及最新树上的子元素。

一个元素的 key 最好是这个元素在列表中的一个独一无二的字符串。通常，我们使用数据中的 id 来作为元素的 key。

对于接触React不久的同学来讲，我们牢记设置key属性这条金科玉律。但是下意识的就利用元素的索引index来解决此问题。这样做是有很大风险的。具体可以参考：深度解析使用索引作为key的负面影响

回想一下数组的特点，当插入/删除元素时，会引起比较大的代价。

一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。

const cars = [
              { id: 1, branch: "Benz", price: "50W" },
              { id: 2, branch: "BMW", price: "50W" },
              { id: 3, branch: "Audi", price: "50W" },
              { id: 4, branch: "BYD", price: "50W" }
            ]

const carItems = cars.map((item) => {
	// 注意这里的key属性
	return <li key={item.id}>{item.branch +"-"+item.price}</li>
})

---

索引集合类-数组的文档
箭头函数的文档

以上内容主要都来自于: React官网 - 列表 & Key，更多跟好玩的内容，还是建议去官网。