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中有多少組件太多？

回答

相關問題