Чем руководствоваться при выборе, вынести ли «подкомпонент» react в компонент или поместить в функцию внутри компонента?
вопросов о выносе SubmitButton в отдельный компонент не возникает.
SubmitButton выносить в отдельный компонент не надо. В большинстве случаев хватает использования обычной кнопки вашего приложения.<Button onClick={handleSubmit}>Submit</Button>Чем руководствоваться при выборе, вынести ли «подкомпонент» react в компонент или поместить в функцию внутри компонента?
Компонент это сущность, если часть древа можно описать как сущность, то логичней ее вынести в компонент. Особенно если она будет в последствии переиспользована. Например:
ListItem, Preloader, Layout, Modal, Container, FormControl, etc.
Если часть древа описывается задачей(например renderRows, renderItem, etc) и ее надо меморизировать, или она используется под условным рендерингом и для отрисовки необходимы дополнительные вычисления, то ее часто логично вынести в отдельный рендер метод, не нагромождая кодовую базу дополнительными компонентами.
Колбеки паттерна render-props так же имеет смысл выносить в отдельные render-методы.
Повторяющиеся блоки лучше выносить в отдельные компоненты, их не только можно переиспользовать, но и есть ряд удобств.
Причины почему не стоит возвращать компоненты из методов класса:
1) Метод должен выполнять какое-то действие, а не возвращать компонент. В большом приложении вам этот подход очень упростит работу.
2) При тестировании проще тестировать маленький отдельный компонент, нежели тестировать большой компонент, еще и его методы, которые возвращают тоже компоненты.
3) Используя Реакт девтул для хрома вам будет намного проще дебажить отдельные компоненты и смотреть полную иерархию вашего приложения, просматривать и изменять стейты и пропсы, чем при использовании методов класса. (Просто проверьте это и будет вопросы отпадут).
4) Если выносить блоки в отдельные компоненты, ваши файлы с текущими компонентами будут намного меньше, удобней будет читать код, и, в зависимости от вашей IDE, всегда сможете узнать что внутри компонента, наведя на него, а не скролить большой класс с методами, в которых хранятся блоки либо списки с какими-то вычислениями, что может быть еще хуже.