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

Question

我正在构建一个简单的 SPA 应用程序，它有一个 LoginForm 和 Reset Form 表单。

这两个组件共享方法 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 个实例，因此您可以将其以组件形式放置，但这并不是迫切需要它的东西，我相信还有更大的事情需要担心。在我制作组件的地方通常有两种情况：

1. 大量 HTML 和相关函数被多次使用
2. 一堆 HTML 和相关函数被使用了几次，但它是很多 HTML 或很多函数，所以在每个需要它们的组件中重复它们会使你的代码变得臃肿，并且难以阅读或调试

我通常做的只是创建组件，当我看到一些东西被多次重复使用时，我会时不时地（最后）浏览一下，看看是否有任何小东西可以可能会被压缩为单个 React 组件，只是为了让事情变得更简洁。

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