12 лучших и простых практик в React, которых стоит придерживаться в 2020 году

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

Перевод статьи 12 React Best Practices You Need to Follow in 2020

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

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

Но сегодня мы заострим внимание на самых основных из лучших практик при работе в React:

1. Делайте компоненты небольшими и отвечающими за конкретный функционал

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

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

Каждый небольшой компонент может быть повторно использован на нескольких проектах.

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

В небольших компонентах проще делать оптимизацию производительности.

Такие компоненты проще обновлять.

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

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

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

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

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

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

Для примера, вы можете создать компонент Button, который может принимать только нужные ему иконки. И каждый раз, когда вам понадобится кнопка, у вас уже будет под рукой нужный компонент. Модульный подход позволит вам покрыть множество рабочих моментов, применяя один и тот же кусок кода. Вам нужно стремиться к золотой середине. Компоненты должны быть достаточно абстрактными, но не очень уж загруженными.

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

3. Консолидируйте повторяющийся код — придерживайтесь правила DRY (Don’t Repeat Yourself)

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

Это собственно и есть одна из лучших практик React. Избегайте дубликатов кода — ну или Don’t Repeat Yourself (DRY).

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

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

const buttons = ['facebook', 'twitter', 'youtube'];

return (
  <div>
    {
      buttons.map( (button) => {
        return (
          <IconButton
            onClick={doStuff( button )}
            iconClass={button}
          />
        );
      } )
    }
  </div>
);

4. Добавляйте комментарии только там, где это действительно нужно

И ещё раз, добавляйте их только там, где это действительно нужно. Это касается не только React, таким образом вы убьете сразу двух зайцев:

Ваш код визуально будет чист и приведен в порядок.

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

5. Именуйте компоненты в соответствии с их функционалом

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

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

Ну и более того, именование компонентов в соответствии с их функционалом станет полезными моментом для работы с любой командой или сообществом, сделав этот компонент доступнее в плане поиска.

6. Называйте компоненты с заглавной буквы

Если вы, как и большинство других, используете JSX, то имена компонентов, создаваемых вами должны начинаться с заглавной буквы. К примеру, вам нужно называть компоненты как SelectButton, а не selectbutton или Menu, а не menu. Это делается для того, чтобы JSX определял их отдельно от стандартных HTML тегов.

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

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

7. Разделяйте аспекты связанные со сменой стейта от рендеринга

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

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

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

Для примера, ваше приложение подтягивает данные после монтирования. Тут вам нужно управлять данными с основном компоненте и передать комплексный таск на рендер подкомпоннету, но в виде пропса.

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 } );
    } );
  }
}

8. Код должен выполняться как и от него ожидается, а также быть готовым к тестированию

Ну тут реально, уже не надо никаких объяснений. Ваш код должен вести себя так, как от него и ожидают, а также должен быть готовым к тестированию в любой момент. Хорошей практикой является именование тестовых файлов также, как и исходных файлов, но с суффиксом .test.

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

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

Держите все файлы для одного компонента в одной папке, даже включая файлы стилей.

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

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

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

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

Подобные сервисы помогают поддерживать и переиспользовать код. Более того, они помогают коду быть более доступным и способствуют коллективной разработке компонентов. Также, код может быть легко синхронизирован среди компонентов.

11. Библиотеки примеров кода

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

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

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

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

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

Последние слова о лучших практиках React

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