Лучшие практики реагирования

1. Компоненты должны быть небольшими и функционально специфичными

Как мы все знаем, с React можно иметь огромные компоненты, которые выполняют ряд задач. Но лучший способ проектирования компонентов — сделать их небольшими, чтобы один компонент соответствовал одной функции. В идеале один компонент должен отображать определенный фрагмент вашей страницы или изменять определенное поведение. В этом есть много преимуществ:

• Функциональные компоненты могут быть автономными, что упрощает тестирование и обслуживание.
• Каждый небольшой компонент можно повторно использовать в нескольких проектах.
• Компоненты, выполняющие общие функции, могут быть доступны сообществу.
• С меньшими компонентами проще реализовать оптимизацию производительности.
• Легче обновлять более мелкие компоненты.
• Компоненты большего размера должны работать тяжелее, и их может быть сложно обслуживать.

Баланс между созданием одного краткого компонента и созданием нескольких функциональных компонентов может варьироваться от организации к организации. В конце концов, вы можете иметь столько компонентов, сколько хотите, и комбинировать их любым способом для достижения того же конечного результата.

2. Возможность повторного использования важна, поэтому сведите создание новых компонентов к минимуму.

Придерживаясь правила одна функция = один компонент, вы можете повысить возможность повторного использования компонентов. Это означает, что вам не следует пытаться создать новый компонент для функции, если компонент для этой функции уже существует.

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

С другой стороны, если какой-либо компонент становится огромным, громоздким и сложным в обслуживании, лучше разбить его на необходимое количество более мелких компонентов.

Например, вы даже можете пойти дальше и создать компонент Button, который может обрабатывать значки. Затем каждый раз, когда вам понадобится кнопка, у вас будет компонент для использования. Если сделать его более модульным, вы сможете охватить множество случаев одним и тем же фрагментом кода. Вы должны целиться где-то посередине. Ваши компоненты должны быть достаточно абстрактными, но не слишком сложными.

class IconButton extends React.Component {
  [...]
  render() {
    return (
      <button onClick={this.props.onClick()}>
        <i class={this.props.iconClass}></i>
      </button>
    );
  }
}

3. Объедините повторяющийся код — СУШИТЕ свой код

Общее правило для всего кода — делать его как можно более кратким и лаконичным.

Здесь тоже все то же самое, поскольку лучшие практики React также предписывают вам делать код кратким и точным. Один из способов сделать это — избегать дублирования — «Не повторяйся» (DRY).

Вы можете добиться этого, внимательно изучив код на наличие шаблонов и сходств. Если вы их найдете, возможно, вы повторяете код, и есть возможность устранить дублирование. Скорее всего, немного переписав, можно сделать его более кратким.

Это в значительной степени зависит от принципа повторного использования в React. Допустим, вы хотите добавить несколько кнопок, содержащих значки, вместо того, чтобы добавлять разметку для каждой кнопки, вы можете просто использовать компонент IconButton, который мы показали выше. Вы даже можете пойти дальше, сопоставив все в массив.

const buttons = ['facebook', 'twitter', 'youtube'];
return (
  <div>
    {
      buttons.map( (button) => {
        return (
          <IconButton
            onClick={doStuff( button )}
            iconClass={button}
          />
        );
      } )
    }
  </div>
);

4. Поместите CSS в JavaScript

Когда вы начинаете работать над проектом, обычной практикой является хранение всех стилей CSS в одном файле SCSS. Использование глобального префикса предотвращает возможные конфликты имен. Однако, когда ваш проект масштабируется, это решение может оказаться неосуществимым.

Существует множество библиотек, позволяющих писать CSS на JS. EmotionJS и Glamorous — две самые популярные библиотеки CSS в JS.

Вот пример использования EmotionJS в вашем проекте. EmotionJS может генерировать полные файлы CSS для вашей продукции. Сначала установите EmotionJS, используя npm.

npm install --save @emotion/core

Далее вам нужно импортировать EmotionJS в ваше приложение.

import { jsx } from '@emotion/core'

Вы можете установить свойства элемента, как показано во фрагменте ниже:

let Component = props => {
  return (
    <div
      css={{
        border: '1px'
      }}
      {...props}
    />
  )
}

Вот ссылка на полную документацию по EmotionJS.

5. Комментируйте только там, где это необходимо

Добавляйте комментарии к коду только там, где это необходимо. Это не только соответствует лучшим практикам React, но и одновременно служит двум целям:

• Это сохранит код визуально свободным от беспорядка.
• Вы избежите потенциального конфликта между комментарием и кодом, если вам случится изменить код в какой-то более поздний момент времени.

6. Назовите компонент после функции

Рекомендуется называть компонент в честь функции, которую он выполняет, чтобы его было легко узнать.

Например, ProductTable — мгновенно передает, что делает компонент. С другой стороны, если вы назовете компонент исходя из потребности в коде, это может запутать вас в будущем.

Другой пример, желательно назвать компонент Avatar, чтобы его можно было использовать где угодно — для авторов, пользователей или в комментариях. Вместо этого, если мы назовем компонент AuthorAvatar в контексте его использования, мы ограничим полезность этого компонента.

Кроме того, наименование компонента после функции делает его более полезным для сообщества, поскольку вероятность его обнаружения выше.

7. Используйте заглавные буквы в именах компонентов

Если, как и большинство людей, вы используете JSX (расширение JavaScript), имена создаваемых вами компонентов должны начинаться с заглавных букв. Например, вы будете называть компоненты SelectButton вместо selectbutton или Menu вместо menu. Мы делаем это для того, чтобы JSX мог идентифицировать их иначе, чем HTML-теги по умолчанию.

Более ранние версии React поддерживали список всех встроенных имен, чтобы отличать их от пользовательских имен. Но поскольку список нуждался в постоянном обновлении, его отменили, и прописные буквы стали нормой.

Если JSX не является вашим предпочтительным языком, вы можете использовать строчные буквы. Однако это может снизить возможность повторного использования компонентов за пределами вашего проекта.

8. Помните о других соглашениях об именах

При работе с React вы обычно используете файлы JSX (расширение JavaScript). Поэтому любой компонент, который вы создаете для React, должен быть назван в регистре Pascal или верхнем регистре верблюда. Это означает имена без пробелов и использование заглавной буквы в каждом слове.

Если вы хотите создать функцию, которая отправляет форму, вы должны назвать ее SubmitForm в верхнем регистре, а не submitForm, submit_form или submit_form. Верхний верблюжий регистр чаще называют паскаль-кейсом. Вот еще список примеров имен переменных и функций в случае Pascal.

9. Отделите аспекты состояния от рендеринга

Компоненты в React могут быть с состоянием или без него. Компоненты с отслеживанием состояния хранят информацию о состоянии компонента и предоставляют необходимый контекст. Напротив, компоненты без состояния не имеют памяти и не могут передавать контекст другим частям пользовательского интерфейса. Они получают реквизиты (входные данные) только от родительского компонента и возвращают вам элементы JSX. Их можно масштабировать и использовать повторно, и они похожи на чистые функции в JavaScript.

Одна из лучших практик React — отделить логику загрузки данных с сохранением состояния от логики рендеринга без сохранения состояния. Лучше иметь один компонент с сохранением состояния для загрузки данных и другой компонент без сохранения состояния для отображения этих данных. Это снижает сложность компонентов.

В более поздних версиях React v16.8 есть новая функция — React Hooks, которые пишут компоненты, связанные с функциями с отслеживанием состояния. Это может в конечном итоге устранить необходимость в компонентах на основе классов.

Например, ваше приложение извлекает некоторые данные при монтировании. Что вы хотите сделать, так это управлять данными в основном компоненте и передавать сложную задачу рендеринга подкомпоненту в качестве реквизита.

import RenderTable from './RenderTable';
class Table extends Component {
  state = { loading: true };
  render() {
    const { loading, tableData } = this.state;
    return loading ? <Loading/> : <RenderTable data={tableData}/>;
  }
  componentDidMount() {
    fetchTableData().then( tableData => {
      this.setState( { loading: false, tableData } );
    } );
  }
}

10. Код должен выполняться должным образом и быть тестируемым

Действительно, это правило не нуждается в объяснении. Код, который вы пишете, должен вести себя так, как ожидается, и его можно легко и быстро протестировать. Рекомендуется называть ваши тестовые файлы идентичными исходным файлам с суффиксом .test. Тогда будет легко найти тестовые файлы.

Вы можете использовать JEST для тестирования кода React.

11. Все файлы, относящиеся к любому компоненту, должны находиться в одной папке.

Храните все файлы, относящиеся к любому компоненту, в одной папке, включая файлы стилей.

Если есть какой-либо небольшой компонент, используемый только определенным компонентом, имеет смысл хранить эти более мелкие компоненты все вместе в этой папке компонента. Тогда иерархия будет понятна — большие компоненты имеют свою папку, а все их более мелкие части разбиты на подпапки. Таким образом, вы можете легко извлечь код в любой другой проект или даже изменить код, когда захотите.

Например, для компонента Form все элементы, такие как файлы CSS, значки, изображения, тесты и любые другие подкомпоненты, относящиеся к Form, должны находиться в одной папке. Если вы правильно назовете файлы и логично объедините связанные файлы, у вас не возникнет проблем с их поиском позже.

12. Используйте такие инструменты, как Bit

Одной из лучших практик React, которая помогает организовать все ваши компоненты React, является использование таких инструментов, как Bit.

Эти инструменты помогают поддерживать и повторно использовать код. Кроме того, это помогает коду стать доступным для обнаружения и способствует совместной работе в команде при создании компонентов. Кроме того, код можно синхронизировать между проектами.

13. Используйте библиотеки сниппетов

Фрагменты кода помогут вам не отставать от лучшего и самого последнего синтаксиса. Они также помогают сохранить ваш код относительно свободным от ошибок, так что это одна из лучших практик React, которую вы не должны пропустить.

Существует множество библиотек фрагментов, которые вы можете использовать, например, ES7 React, Redux, JS Snippets и т. д.

14. Пишите тесты для всего кода

В любом языке программирования адекватное тестирование гарантирует, что любой новый код, добавляемый в ваш проект, хорошо интегрируется с существующим кодом и не нарушает существующую функциональность. Рекомендуется писать тесты для любого нового компонента, который вы создаете. В качестве хорошей практики вы должны создать каталог __Test__ в каталоге вашего компонента для размещения всех соответствующих тестов.

В целом тесты в React можно разделить на две части: тестирование функциональности компонентов с помощью приложения React и тестирование всего приложения после его рендеринга в браузере. Вы можете использовать инструменты кросс-браузерного тестирования для тестов последней категории.

В первом случае вы можете использовать средство запуска тестов JavaScript Jest для эмуляции HTML DOM, используя jsdom для тестирования компонентов React. Хотя полностью точный тест возможен только в браузере на реальном устройстве, Jest обеспечивает хорошее приближение к реальной среде тестирования на этапе разработки вашего проекта.

15. Следуйте правилам линтинга, разбивайте слишком длинные строки

Линтинг — это процесс, в котором мы запускаем программу, которая анализирует код на наличие потенциальных ошибок.

В основном мы используем его для вопросов, связанных с языком. Но он также может автоматически исправить многие другие проблемы, особенно стиль кода. Использование линтера в вашем коде React помогает сохранить ваш код относительно безошибочным и безошибочным.