如果我在 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() 的值作为 prop?

传递到 Form 中

Answer 1

一般来说，无论是使用 React 构建 Web 应用程序还是使用 Java 编写程序或任何软件内容，如果您要重复代码，看看如何将它们整合为一个通常是个好主意资源。它可能不会提高您的软件的效率，但它更清晰、更容易组织并且更不容易出错，因为只有一个地方可能会发生错误。

React 的优点之一是能够制作可重用的组件，这样做肯定可以使构建和调试应用程序更加容易。然而，并不是所有的东西都必须是一个组件，如果你把一组简单的不被重用的元素变成 3 个不同的 React 组件只是因为你可以，这有点像过早的优化。您应该停下来想一想“我是否会大量重复使用这组 HTML？如果它是组件形式，我会得到什么好处？”

对于 React，请特别查看您的示例，如果您从中获取数据的输入字段的类型和数量不同，并且您在提交时执行的操作在两种表单类型之间不同 (我假设它们是）那么可以有两个不同的组件（就像你一样）。你可以像你说的那样有一个额外的组件，一个 <Form /> 组件，如果你想要的话，它采用 getInputFields() 的值，但看起来你的表单的 HTML 是非常小的。只是表单元素，带有一些动态组件和一个提交按钮。因此，由于它不是很多 HTML 并且只有 2 个实例，您可以将它放在组件形式中，但这并不是迫切需要它的东西，我相信还有更重要的事情需要担心。通常有两种情况我发现我制作组件的地方：

一堆HTML和相关的函数被用了很多很多次
一堆 HTML 和相关函数被使用了几次，但它是很多 HTML 或很多函数所以在每个需要它们的组件中重复它们会使你的代码膨胀并使其难以通读或调试

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

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

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

If I am repeating myself in React, should I create a Component?

reactjs

react-jsx

jsx