2017-02-15 65 views
0

我建立具有LoginForm的重置表单形式简单的SPA应用。如果我在React中重复自己,我应该创建一个组件吗?

这两个组件的共享方法 getInputFields()handleSubmit()

这里是我的代码示例:

import React from 'react'; 

import InputField from './InputField'; 
import SubmitButton from './SubmitButton'; 

class ResetForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.getInputFields = this.getInputFields.bind(this); 
    } 
    handleSubmit(e) { 
    e.preventDefault(); 
    console.log('submitted'); 
    } 
    getInputFields() { 
    return [ 
     { type: 'email', placeholder: 'Email' } 
    ] 
    } 
    render() { 
    return (
    <form onSubmit={ this.handleSubmit }> 
     { 
      this.getInputFields() 
      .map((field) => <InputField type={ field.type } placeholder={ field.placeholder } />) 
     } 
     <SubmitButton /> 
     </form> 
    ) 
    } 
} 

export default ResetForm; 

而且我LoginForm的只有不同的数据(内getInputFields()

如果我再说一遍,我是否应该自动考虑制作一个新组件?例如在这种情况下是<Form>组件并将getInputFields()的值作为通道传递给Form?

+0

可能会有帮助https://twitter.com/dan_abramov/status/793127800769224704?lang=en – Abhishek

回答

1

在一般情况下,无论是建设有反应或用Java编写一个程序或任何软件的东西,如果你重复的代码通常是个好主意,就看你如何整理所有到一个源的Web应用程序。它可能无法提高软件的效率,但组织更简单,组织更简单,而且容易出错,因为只有一个地方可能会出现错误。

之一好话大约阵营是能够使可重用的组件,而这样做当然可以构建和调试应用程式更容易。然而,并非一切都已经成为一个组成部分,如果你把一个简单的组不重用元素,并把它变成像3个不同的反应的组分只是因为你可以,这有点像过早优化。你应该停下来思考'我是否会重复使用这组HTML,如果它是以组件的形式,我会得到什么好处?'

对于React,特别看你的例子,如果你从中获取数据的输入字段在类型和数字上是不同的,并且你在提交时执行的动作在两种表单类型之间是不同的我假设他们是),那么可以有两个不同的组件(就像你一样)。你可以有一个额外的组件就像你说的,一个<Form />组件,它利用getInputFields()值,如果你想,但它看起来像你的形式HTML是很小的。只是表单元素,有一些动态组件和一个提交按钮。因此,因为它不是一个很大的HTML和这里只有2它的情况下,你可以把它放在组件形式,但它不是东西是在它的迫切需要,我敢肯定有更大的事情担心。还有平时我发现两种情况下我做组件:

  1. HTML和相关功能的一束用很多很多的时间
  2. HTML和相关功能的一束用了几次,但它是一个很多HTML或许多功能,以便在需要它们的每个组件中重复它们会使代码变得庞大并使其难以通读或调试

我通常所做的只是创建组件,并在看到东西时被重复使用多次,然后每隔一段时间(最后),我会仔细看看是否有任何小小的ngs在这里和那里可能会被凝聚成单个React组件,只是为了让事情变得更清洁。

到底它的好,使组件以上这两个原因,但如果涉及到微小的东西(像被重复,也许2-3次1种或两个HTML元素),那么我会担心大在强调小东西之前先做好充分的准备。

+0

好的答案,它绝对有意义,符合DRY的概念。我现在不会担心,但是当我完成时我会探索它,我期待重构。 – Dan

相关问题