reactjs - 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 属性并呈现标签
• 你明白了...