ReactJS 中有多少组件太多了？答案

【问题标题】：How many components are too many in ReactJS?ReactJS 中有多少组件太多了？
【发布时间】：2016-04-18 23:31:24
【问题描述】：

以“联系我们”表单为例。我可以只在一个组件中构建整个东西，或者它可以真正分解：每个文本字段都是一个组件、提交按钮等......如何知道应该将多少表单解构和重建为组件？

【问题讨论】：

反复试验。我通常开始正常写作，一旦我看到可能是它自己的组件的东西，我就把它放在那里。
另外请记住，您通常可以选择将命名抽象引入render 方法，只需生成一个函数而不是一个全新的组件。

标签： reactjs

【解决方案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 属性并呈现标签
你懂的……

【讨论】：

【解决方案2】：

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

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

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

【讨论】：