Question

例如，我们要显示电话簿

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

问题是如何最好地做到：全部在一个ContactList组件中

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

或创建其他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>
   )
}

为什么？

Answer 1

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

但是，如果这条JSX系列将来会变得越来越大，越来越复杂，该怎么办？如果要为此列表项专门使用一些复杂的样式怎么办？还是要使用这种方式还是考虑创建一个新组件？

如果您不创建新组件，那么您的主要组件将变得更胖，更复杂且难以阅读。而且，过一会儿将很难维护此列表项的逻辑。但是，使用单独的组件，您只需转到创建的组件并在那里进行更改即可。

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

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

进一步阅读：Thinking in React

如果您看他们给出的示例，则即使类别标头有一个单独的组件。当需要新组件时，他们会说这句话：

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

Answer 2

由于它是一种“电话簿”类型的结构，所以一个好方法（我认为）是映射数组并准备一个 table 进行渲染。为了您的目的，不需要单独的组件。最终的方法实际上取决于数据的结构，但是我们可以说像我们建议的那样有一系列对象：

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>
                  )});

....，稍后在代码中的 render 确切地说，您可以执行以下操作：

                       <table>
                            <thead>
                            <tr>
                                <th>NAME</th>  // The 'Name' header
                                <th>PHONE</th> // The 'phone' header
                            </tr>
                            </thead>
                            <tbody>
                                {dataTable}  // Here you would render your contacts data
                            </tbody>
                        </table>

查看代码段，以使您最终了解外观。我真的希望这会有所帮助。

const contacts = [{
  name: 'John',
  phone: 23421
}, {
  name: 'Lisa',
  phone: 33665
}, {
  name: 'Rick',
  phone: 38885
}];

// Preparing the data for rendering

console.log('NAME ' + '  ' + 'PHONE');

const dataTable = () => contacts.map(a => (a.name + '   ' + a.phone));


console.log(dataTable().join("\r\n"));

我需要在React循环中创建一个新组件吗？

2 个答案: