ReactJS中有多少组件太多了？

Question

采取＆＃34;联系我们＆＃34;以形式为例。我可以在一个组件中构建整个东西，或者它可以真正分解：每个文本字段都是一个组件，提交按钮等等......如何知道应该解构多少表单并将其重建为组件？

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

这最终取决于个人偏好和应用程序的复杂性，但文档"Thinking in React"文章引用single responsibility principle作为将UI分解为组件的好方法。< / p>

另外值得注意的是：使用react构建的主要原因之一是它非常有利于可以重复使用的模块化组件。更大，更复杂的组件往往更难重复使用。您可以在一个组件中构建完整的联系表单，但如果您想在其他地方重新使用电子邮件输入验证程序，则可以考虑创建另一个组件。

有趣的是，我会说实际上我的反应组件长度在50-300行之间，顶层组件是最大和最复杂的。