Destell
@Destell
React, React Native junior developer

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

Возник вопрос, чем руководствоваться при выборе, вынести ли "подкомпонент" 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>
)


Просто ориентироваться на объем кода в подобных элементах? Есть ли еще критерии?
  • Вопрос задан
  • 144 просмотра
Решения вопроса 2
rockon404
@rockon404 Куратор тега React
Frontend Developer
вопросов о выносе SubmitButton в отдельный компонент не возникает.

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

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


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

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

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

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы