Реагировать на стратегию разбивки компонентов

Question

Мне нужно реализовать дерево компонентов в React.

И мне интересно, что такое достаточно хорошая схема, как разбить все на дерево но с учетом масштабирования (кода или команды).

Обычно я использую следующий способ:

function UserAvatar(props) {
  return <div><img src="" alt="" /></div>   
}

function UserEmail(props) {
  return <div>e-mail: some@email.com</div>   
}

function UserSection(props) {
  return (
    <div className="container">
      <div className="section">
        <UserAvatar />
      </div>
      <div className="section">
        <UserEmail />
      </div>
    </div>
  );
}

Но стоит ли мне избегать всех этих делений макета и сделать макет чище?

Один очевидный вариант - перейти к разметке отдельных компонентов.

Спасибо

Answer 1

Рекомендации по разбивке компонентов:

1. Когда ваш компонент слишком много делает.В идеале компоненты должны быть направлены на выполнение одной (или нескольких, но не многих) задач.Самый очевидный признак - это когда число строк в коде становится слишком длинным.По грубой оценке, компоненты должны быть не более 300 строк.

2. Если вы хотите повторно использовать компоненты в нескольких родительских компонентах, вам придется их разбить.

3. Если вы хотите оптимизироватьrender() определенных поддеревьев компонента через shouldComponentUpdate(), тогда вам нужно разбить их, так как вы можете реализовать shouldComponentUpdate() только на уровне компонента.

4. Разделение выборки данныхлогика от рендеринга и обработки логики взаимодействия с пользователем.Вместо того, чтобы один компонент выполнял как выборку данных, так и (рендеринг и обработку пользовательских взаимодействий), разбейте их на более мелкие компоненты, чтобы можно было отдельно тестировать компоненты:

   • Проверка того, что первый компонент извлекает данные.
   • Проверьте, что второй компонент правильно отображает данные и может реагировать на взаимодействие с пользователем.
   • Подробнее об этом здесь

Гораздо больше хороших ответов Кента С. Доддса здесь .

Answer 2

Рекомендуется хранить каждый Component в своих собственных файлах, а затем импортировать их туда, где вам нужно сослаться на них.

Кроме того, в вашем примере, скорее всего, вам потребуется установить URL-адрес аватара и адрес электронной почты в качестве реквизита. Затем заставьте UserAvatar и UserEmail отобразить значения. Кроме того, рекомендуется настроить propTypes, чтобы другие разработчики (и вы сами) знали, какие пропускаются.

Один из критериев разбиения компонентов на подкомпоненты - это когда они имеют дело с различными проблемами или когда размер файла становится слишком большим. Другой критерий - когда вам нужно повторно использовать этот компонент в каком-то другом контексте.

Надеюсь, это поможет.