在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。

如果列表很大并且编写干净的代码，则最好使用单独的组件。