我了解到，在呈现列表项时，Reaction会查看它们的键是否从先前的呈现中更改，因此它只重新呈现更改后的项.这种方式节省了渲染时间，并在长列表和复杂应用程序的情况下提供了性能优势.
我有一个例子，我在一个列表中有3个具有唯一键的项目. 我只是在改变他们在列表中的出现顺序. 在这种情况下，呈现逻辑如何工作.因为我用相同的值和相同的键呈现了相同数量的元素.实际上，项的关键字值没有变化，因为它们是唯一的.
import React, { useState } from 'react';
const colors = [
{ id: '1abc', name: 'Green' },
{ id: '2pqr', name: 'Blue' },
{ id: '3xyz', name: 'Red' },
];
function ListItems() {
return (
<ul>
{colors.map((item, index) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
下一次，假设我将 colored颜色 数组更改为交换了第二个和第三个元素:
const colors = [
{ id: '1abc', name: 'Green' },
{ id: '3xyz', name: 'Red' },
{ id: '2pqr', name: 'Blue' },
];
在这种情况下，呈现逻辑如何工作？
谢谢