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

Question

Destell @Destell

React, React Native junior developer

React

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

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

Вопрос задан более трёх лет назад
516 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

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

Зачем?

public renderInput =() => (

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

Answer 1 · 2019-08-27 10:18:22

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

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

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

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

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

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

Войдите на сайт