ReactJS中有多少组件太多？

以“联系我们”表单为例。我可以在一个组件中构建整个事物，或者它可以真正分解：每个文本字段都是一个组件，提交按钮等......如何知道应该将多少形式解构并重新构建为组件？ReactJS中有多少组件太多？

来源

2016-04-18 Jason Leach

试验和错误。我通常开始正常写作，一旦我看到可能是它自己的组件的东西，我把它放在那里。 – azium

另外请记住，您通常只能通过发芽函数而不是全新的组件来将命名的抽象引入'render'方法。 –

我的原则是能，将在您的应用程序，无论是美学或功能重新使用组件IZE事情。如果这是您需要的唯一形式，则可能不值得将每个元素转换为组件的开销。但是如果你有很多形式考虑制作组件。

例理由组件IZE表单元素：

特殊形式字段的功能（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道具和呈现标签
你的想法...

来源

2016-04-19 01:40:53 mtaube

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

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

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

来源

2016-04-19 01:15:02

ReactJS中有多少组件太多？

回答

相关问题