ReactJS中有多少组件太多

Question

以"联系我们"表单为例。我可以在一个组件中构建整个内容，也可以将其真正分解：每个文本字段都是一个组件、提交按钮等。。。。如何知道有多少形式应该被解构和重建为组件？

Answer 1

我的规则是组件化可以并且将在应用程序中重复使用的东西，无论是美观还是功能。如果这是您唯一需要的形式，那么可能不值得将每个元素转换为组件。但如果你有很多形式，可以考虑制作组件。

组件化表单元素的原因示例：

• 特殊表单字段功能（InputEmail：对电子邮件输入进行前端验证）
• 样式（SubmitButton：始终为红色、全宽等）

在我参与的更大的项目中，这一点效果很好。我有一组可自定义的表单组件，这样我就可以构建一个具有复杂功能的样式表单。通常它看起来像：

<Form onSubmit={this.handleSubmit}>
    <Input default label="Email Address" type="email" validate={validateEmail} />
    <Input default label="Password" type="password" />
    <Button primary type="submit" />
</Form>

• Form执行一般验证逻辑
• Input运行validateEmail道具并渲染标签
• 你明白了

Answer 2

这最终取决于个人偏好和应用程序的复杂性，然而文档的"React中的思考"文章引用了单一责任原则作为将UI分解为组件的好方法。

同样值得注意的是：使用react构建的主要原因之一是，它强烈支持可以重复使用的模块化组件。更大、更复杂的组件往往更难重复使用。您可以在一个组件中构建整个联系人表单，但如果您想在其他地方重用电子邮件输入验证器，可以考虑创建另一个组件。

有趣的是，我想说，在实践中，我的react组件的长度在50-300行之间，其中顶级组件是最大和最复杂的。