Reactjs 我是否需要在React循环中创建新组件？

例如，我们想要显示一个电话簿

John - 123
Alex - 487
...
Peter - 034

问题是如何最好地做到这一点：一个联系人列表组件

function ContactList (props) {
   return (
     <div>
       {props.contacts.map (item => <div> {item.name} - {item.phone} </ div>)}
      </ div>
   )
}

功能联系人列表（道具）{
返回(
     
{props.contacts.map（item=>{item.name}-{item.phone}}
      
   )
}

或创建其他ContactListItem组件：

function ContactList (props) {
   return (
     <div>
       {props.contacts.map (item => <ContactListItem key = {item.id} name = {item.name} phone = {item.phone} />)}
      </ div>
   )
}

function ContactListItem (props) {
   return (
     <div>
       {props.name} - {props.phone} </ div>
      </ div>
   )
}

功能联系人列表（道具）{
返回(
     
{props.contacts.map（item=>）}
      
   )
}
功能ContactListItem（道具）{
返回(
     
{props.name}-{props.phone}
      
   )
}

---

为什么呢？

简单的回答是：不，您不需要或不必为您的联系人项目创建新组件。这完全取决于你

但是，如果这个单一的JSX产品线将来会变得更大、更复杂，会怎么样？ 如果您想专门为此列表项使用一些复杂样式，该怎么办？ 不过，您想使用这种方式，还是考虑创建一个新的组件？

如果你不创建一个新的组件，那么你的主要组件就会变得更胖、更复杂、更难阅读。此外，过一段时间后，维护此列表项的逻辑将更加困难。但是对于一个单独的组件，您所需要的只是转到创建的组件并在那里进行更改

对此没有任何规定。重构、创建新组件、分离组件（视图、控件、容器等）完全由您决定。人们通常会说，开始编写组件。当您意识到它变得越来越大、越来越复杂时，创建新的组件并分离您的逻辑

当然也有最佳实践。当你研究别人的代码时，你会看到那些最佳实践，并开始据此思考。但是，作为一名学习者，我只是开始编写我的组件，并在需要时根据这些最佳实践对其进行重构

进一步阅读：

如果你看一下他们给出的例子，即使分类标题有一个单独的组件。当需要新组件时，他们会说：

function ContactList (props) {
   return (
     <div>
       {props.contacts.map (item => <ContactListItem key = {item.id} name = {item.name} phone = {item.phone} />)}
      </ div>
   )
}

function ContactListItem (props) {
   return (
     <div>
       {props.name} - {props.phone} </ div>
      </ div>
   )
}

其中一种技术是单一责任原则，即 理想情况下，组件应该只做一件事。如果它最终长大了，它就会长大 应分解为更小的子组件

---

因为它是一种“电话簿”类型的结构，所以（在我看来）一个好的方法是映射数组并准备一个

表

进行渲染。 出于您的目的，不需要单独的组件。最后一种方法实际上取决于数据的结构，但假设我们有一个像您建议的那样的对象数组：

const contacts = [{
  name: 'John',
  phone: 23421
}, {
  name: 'Lisa',
  phone: 33665
}, {
  name: 'Rick',
  phone: 38885
}];


// Preparing the data for rendering
        const dataTable = contacts
            .map(item => {
                return (
                    <tr key={item.phone}> // Phone numbers are perfect keys, since they're unique as it gets :)
                        <td>{item.name}</td>
                        <td>{item.phone}</td>
                     </tr>
                  )});

查看片段，让您了解最终的效果。 我真的希望这是有帮助的

const contacts=[{
姓名：'约翰'，
电话：23421
}, {
名字：'丽莎'，
电话：33665
}, {
名字：'瑞克'，
电话：38885
}];
//准备用于渲染的数据
log（'NAME'+'+'PHONE'）；
constdatatable=（）=>contacts.map（a=>（a.name+''+a.phone））；
console.log（dataTable（）.join（“\r\n”）