在React.js中使用列表和键
在React中的UI上显示列表
Map是JavaScript函数，它将为提供的数组返回一个新数组，如下所示-
const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbers = originalNumbers.map( (number)=> number * number); console.log(“Squared Numbers==”squaredNumbers);
在React中构建列表与使用map函数类似。我们将返回一个包含平方值的列表元素，而不仅仅是返回一个平方数。
const originalNumbers = [ 2, 4, 6, 8, 10];
const squaredNumbersList= originalNumbers.map((number) =>
<li>{number*number}</li>
);使用ui标签在屏幕上渲染-
ReactDOM.render(
<ul>{ squaredNumbersList }</ul>,
document.getElementById('root')
);当我们运行此示例时，我们将在浏览器控制台中收到警告，提示列表键缺失。为了反应理解每一行，它需要一个键，该键应该是行唯一的。
const squaredNumbersList= originalNumbers.map((number) =>
<li key={SomeUniqueKey}>{number*number}</li>
);键将用于识别哪一行被更改，删除或新添加。因此，React将更新UI。我们还将获得循环索引。
const squaredNumbersList= originalNumbers.map((number,index) =>
<li key={index}>{number*number}</li>
);但是React不建议使用索引作为键，因为它会对应用程序的性能产生一些负面影响。
键在同级行之间应该是唯一的，并且在组件中不必是全局唯一的。
map函数内部的元素需要键，而行中不需要其他嵌套的子元素。
在jsx表达式中嵌入map函数-
function MessageList(props) {
const messages = props.messages;
return (
<ul>
{messages.map((message) =>
<ListItem key={message.rowKey}
value={message.text} />
)}
</ul>
);
}这里ListItem是一个自定义组件，将每个消息作为值prop，键是消息对象上的rowKey。
如果列表很大并且编写干净的代码，则最好使用单独的组件。