在React中,列表渲染是一种常见的模式,它允许我们基于数组的内容动态生成React元素。同时,为了提高React的性能并确保正确的元素更新,我们需要为动态生成的元素添加唯一的 key 属性。
列表渲染
列表渲染通常使用map函数,它会遍历数组中的每个元素,并返回一个新的React元素数组。JSX 允许在大括号中嵌入任何表达式,所以我们可以内联 map() 返回的结果:
在上述例子中,items 是一个包含字符串的数组。通过map函数,我们遍历数组并为每个元素创建一个<li>元素。注意,每个<li>元素都有一个唯一的key属性,通常使用元素的索引作为key。这有助于React在更新时更准确地识别每个元素。
添加 key 属性的原因
- React的更新算法: React使用key属性来优化元素更新的过程。通过使用key,React能够更有效地确定哪些元素被添加、删除或修改,从而避免不必要的重新渲染。
- 帮助React识别元素: 每个React元素都应该有一个唯一的key,以便React能够区分它们。这对于处理动态列表、排序或筛选等操作非常重要。
使用元素属性作为 key 的注意事项
你可能会想直接把数组项的索引当作 key 值来用,实际上,如果你没有显式地指定 key 值,React 确实默认会这么做。但是数组项的顺序在插入、删除或者重新排序等操作中会发生改变,此时把索引顺序用作 key 值会产生一些微妙且令人困惑的 bug。
与之类似,请不要在运行过程中动态地产生 key,像是 key={Math.random()} 这种方式。这会导致每次重新渲染后的 key 值都不一样,从而使得所有的组件和 DOM 元素每次都要重新创建。这不仅会造成运行变慢的问题,更有可能导致用户输入的丢失。所以,使用能从给定数据中稳定取得的值才是明智的选择。
有一点需要注意,组件不会把 key 当作 props 的一部分。Key 的存在只对 React 本身起到提示作用。
所以在使用元素属性作为key时,需要确保该属性在列表中是唯一且稳定的。不推荐使用索引作为唯一的key,因为它可能导致一些问题,尤其是在动态操作数组时。
最好的做法是使用每个元素的唯一标识符作为key,例如元素在数据中的ID。
没有稳定的 ID 的情况
如果数据中没有唯一且稳定的ID,你可以使用一些哈希函数或库来生成一个稳定的ID,确保在数据变化时仍然能够提供唯一的key。
在这个例子中,我们使用了uuid库来生成一个唯一的ID作为key。
总之,列表渲染是React中常见的模式,使用key属性可以确保React在处理动态列表时更加高效和准确。
马上一练
数组生成菜谱列表,其中每个菜谱,都用