Сколько компонентов слишком много в ReactJS?

Question

В качестве примера возьмем форму «Свяжитесь с нами». Я мог бы просто построить всю вещь в одном компоненте, или это может быть действительно разложено: каждое текстовое поле является компонентом, кнопкой отправки и т. Д. Как узнать, какая форма должна быть деконструирована и перестроена как Компоненты?

Answer 1

Мое правило заключается в компонент-Изе вещи, которые могут и будут повторно использовать в вашем приложении, либо эстетически или функционально. Если это единственная форма, которая вам нужна, вероятно, не стоит накладных расходов на преобразование каждого элемента в компонент. Но если у вас будет много форм, подумайте о создании компонентов.

Пример причины для компонент-Изи своих элементов формы:

• функциональности особого вида поля (InputEmail: делают передний план проверку для входов электронной почты)
• Styling (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 как хороший способ разбить ваш интерфейс на компоненты.

Также обратите внимание: одна из основных причин, по которой вы будете строить, используя реакцию, заключается в том, что она сильно поддерживает модульные компоненты, которые могут быть повторно использованы. Большие, более сложные компоненты, как правило, сложнее повторного использования. Вы можете создать целую форму контакта в одном компоненте, но если вы хотите повторно использовать средство проверки ввода электронной почты в другом месте, вы можете подумать о создании другого компонента.

Я бы сказал, что на практике мои реактивные компоненты находятся где-то между 50-300 линиями, причем компоненты верхнего уровня являются самыми большими и сложными.