Question

我正在构建一个简单的SPA应用程序，其中包含 LoginForm 和重置表单表单。

这两个组件共享这些方法 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？

Answer 1

一般情况下，无论是使用React构建Web应用程序还是使用Java编写程序，还是使用任何软件编写代码，如果重复代码，通常都应该了解如何将其全部整理到一个源代码中。它可能无法提高您的软件效率，但它更清晰，更容易组织，更不容易出错，因为只有一个地方可能发生错误。

React的一个好处是可以制作可重用的组件，这样做可以使构建和调试应用程序更容易。然而，如果你只使用一组简单的不重复使用的元素并将其转换成3个不同的React组件，那么就不一定要成为一个组件，这有点像过早的优化。你应该停下来思考'我是否会重复使用这组HTML，如果它是组件形式，我会得到什么好处？'

对于React，特别是查看您的示例，如果您从中获取数据的输入字段的类型和编号不同，并且您在提交时执行的操作在两种表单类型之间是不同的（我假设它们是）然后可以有两个不同的组件（就像你一样）。你可以有一个额外的组件，一个<Form />组件，如果你想要的话，它会取getInputFields()的值，但看起来你的表单的HTML非常小。只是表单元素，包含一些动态组件和一个提交按钮。因此，由于它不是很多HTML而且只有2个实例，你可以把它放在组件形式中，但它不是那种迫切需要它的东西，我确信有更大的事情需要担心。通常有两种情况我会在哪里找到组件：

一堆HTML和相关的函数被多次使用
一些HTML和相关的函数被使用了几次，但它有很多HTML或很多函数，所以在每个需要它们的组件中重复它们会使代码膨胀并使其难以读取或调试< / LI>
我通常做的只是创建组件，当我看到多次重复使用的东西，然后偶尔（以及最后）我看一看，看看这里和那里是否有任何小东西可以可能会被简化为单个React组件，只是为了让事情变得更清洁。

最后，出于上述两个原因制作组件是好事，但如果涉及到微小的东西（比如一两个HTML元素重复可能2-3次）那么我会担心更大的东西首先是强调这些小东西。

如果我在React中重复自己，我应该创建一个组件吗？

1 个答案: