Чем руководствоваться при выборе, вынести ли «подкомпонент» react в компонент или поместить в функцию внутри компонента?

Question

[Destell]

Возник вопрос, чем руководствоваться при выборе, вынести ли "подкомпонент" react в компонент или поместить в функцию внутри компонента?

К примеру, в варианте

<Form>
    <SubmitButton someProps={}>
         //some code
    </SubmitButton>
</Form>

вопросов о выносе SubmitButton в отдельный компонент не возникает.

Но, например

<Form>
  {
       data.map(input=> (
            <div someProps={}>
                  <Input /> //imported
                  //some code
            </div>
       ))
   }
</Form>

Содержимое цикла, по логике, стоит вынести в отдельный метод.
Т.е. что-то вроде этого, если делать в родительском компоненте.

public renderInput =() => (
             <div someProps={}>
                  <Input /> //imported
                  //some code
            </div>
)

Просто ориентироваться на объем кода в подобных элементах? Есть ли еще критерии?

Comments

[Yustas Alexu]

Содержимое цикла, по логике, стоит вынести в отдельный метод.

Зачем?

public renderInput =() => (

Пожалуйста не надо городить псевдо ООП на реакте. Добавление хуков в последних версиях реакта ясно намекает всем тем, кто еще не понял, что реакт движется по пути функционального подхода.

[Destell]

Yustas Alexu, удобство чтения, как минимум, когда в renderInput, допустим. большой объем кода и в самом родителе большой объем кода.

Answer 1

[Антон Спирин]

вопросов о выносе SubmitButton в отдельный компонент не возникает.

SubmitButton выносить в отдельный компонент не надо. В большинстве случаев хватает использования обычной кнопки вашего приложения.
<Button onClick={handleSubmit}>Submit</Button>

Чем руководствоваться при выборе, вынести ли «подкомпонент» react в компонент или поместить в функцию внутри компонента?

Компонент это сущность, если часть древа можно описать как сущность, то логичней ее вынести в компонент. Особенно если она будет в последствии переиспользована. Например:
ListItem, Preloader, Layout, Modal, Container, FormControl, etc.

Если часть древа описывается задачей(например renderRows, renderItem, etc) и ее надо меморизировать, или она используется под условным рендерингом и для отрисовки необходимы дополнительные вычисления, то ее часто логично вынести в отдельный рендер метод, не нагромождая кодовую базу дополнительными компонентами.
Колбеки паттерна render-props так же имеет смысл выносить в отдельные render-методы.

Comments

[Destell]

SubmitButton было просто примером, возможно, не очень удачным. Спасибо.

Answer 2

[DarthJS]

Повторяющиеся блоки лучше выносить в отдельные компоненты, их не только можно переиспользовать, но и есть ряд удобств.

Причины почему не стоит возвращать компоненты из методов класса:
1) Метод должен выполнять какое-то действие, а не возвращать компонент. В большом приложении вам этот подход очень упростит работу.
2) При тестировании проще тестировать маленький отдельный компонент, нежели тестировать большой компонент, еще и его методы, которые возвращают тоже компоненты.
3) Используя Реакт девтул для хрома вам будет намного проще дебажить отдельные компоненты и смотреть полную иерархию вашего приложения, просматривать и изменять стейты и пропсы, чем при использовании методов класса. (Просто проверьте это и будет вопросы отпадут).
4) Если выносить блоки в отдельные компоненты, ваши файлы с текущими компонентами будут намного меньше, удобней будет читать код, и, в зависимости от вашей IDE, всегда сможете узнать что внутри компонента, наведя на него, а не скролить большой класс с методами, в которых хранятся блоки либо списки с какими-то вычислениями, что может быть еще хуже.