[Перевод] 9 советов по улучшению качества кода React-приложений20.04.2018 15:18

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

image

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

1. Проверка кода с помощью линтера


Повышению качества программ способствует использование хорошей системы проверки кода на предмет наличия ошибок. Обычно такие проверки производят с помощью программ-линтеров. Если у разработчика имеется продуманный набор правил линтинга, редактор кода сможет автоматически отслеживать появление того, что способно привести к проблемам. Однако, раннее обнаружение потенциальных проблем — это лишь одна из задач, решаемых, например, с помощью ES Lint. Не менее важно и то, что применение подобных средств ведёт к тому, что разработчик всегда будет в курсе передовых наработок в области программирования для React.

Рассмотрим пример.

import react from 'react';
/* Другие команды импорта */

/* Код */

export default class App extends React.Component {
  render() {
    const { userIsLoaded, user } = this.props;
    if (!userIsLoaded) return ;
    
    return (
      /* Код */
    )
  }
}Предположим, что в функции render(), надо обратиться к новому свойству this.props.hello. Если линтер выяснит, что это свойство не прошло валидацию, он тут же об этом сообщит:

'hello' is missing in props validation (react/prop-types)


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

Для того чтобы оснастить свою среду разработки линтером для JavaScript, можете воспользоваться ресурсом ESLint или заглянуть на страницу руководства по стилю Airbnb. Кроме того, можно установить плагин ESLint для React.

2. Использование propTypes и defaultProps


Выше мы говорили о том, как ведёт себя линтер при попытке работы со свойством, которое не прошло валидацию. Теперь рассмотрим следующий пример.

static propTypes = {
  userIsLoaded: PropTypes.boolean.isRequired,
  user: PropTypes.shape({
    _id: PropTypes.string,
  )}.isRequired,
}


Здесь, если нужно, чтобы свойство userIsLoaded не являлось необходимым, понадобится добавить в код следующее: 

static defaultProps = {
 userIsLoaded: false,
}


С помощью механизмов PropType и defaultProps мы можем описывать свойства, используемые в компонентах, что позволяет React организовывать их валидацию, которая повышает качество и стабильность программ. В данном случае мы сообщаем системе о том, что свойство userIsLoaded должно иметь логическое значение, и то, что его значением по умолчанию является false, что делает его указание необязательным. Если же свойство является обязательным, то нет необходимости задавать его значение по умолчанию.

Тут, кроме того, стоит сказать, что не рекомендуется использовать слишком «размытые» типы свойств вроде Object или Array.

Именно поэтому здесь показано использование shape для валидации объекта user, внутри которого имеется id, propType которого является string. При этом необходимым является весь объект user.

Наличие propTypes и defultProp, у каждого компонента, использующего props, играет большую роль в разработке надёжных React-приложений.

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

Обратите внимание на то, что в отличие от ранних версий React, теперь механизм propTypes не включён в React по умолчанию и для его использования понадобится добавить эту возможность в проект в виде зависимости. Для того чтобы это сделать, можно воспользоваться npm-пакетом prop-types.

3. О создании новых компонентов


Рассмотрим пример. Во фрагменте кода, показанном ниже, имеется компонент Profile. Внутри этого компонента есть компоненты MyOrder и MyDownloads.

export default class Profile extends PureComponent {
  static propTypes = {
    userIsLoaded: PropTypes.bool,
    user: PropTypes.shape({
      _id: PropTypes.string,
    }).isRequired,
  }
  
  static defaultProps = {
    userIsLoaded: false,
  }
  
  render() {
    const { userIsLoaded, user } = this.props;
    if (!userIsLoaded) return ;
    return (
      

        

          

            
            
          

          
        

        

          {isRole('affiliate', user={user._id) &&
            
          }
        

      

    )
  }
}


Код всех этих компонентов можно было бы написать прямо здесь, так как тут выполняется загрузка данных из одного и того же места, представленного объектом user. Однако такой подход превратит небольшие компоненты в один гигантский компонент. Всё это приводит нас к вопросу о том, когда нужно создавать новые компоненты.

Хотя и не существует жёсткого правила, касающегося переноса кода в компоненты, прежде чем это делать, стоит поискать ответы на следующие вопросы:

  • Становится ли функционал кода громоздким?
  • Представляет ли этот код некое самостоятельное явление?
  • Планируется ли использовать этот код повторно?


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

Однако тут стоит учитывать, что мало кому понравится видеть в текстах программ огромные компоненты, состоящие из 200–300 строк кода и полные различных вспомогательных механизмов.

4. Компоненты, чистые компоненты, функциональные компоненты без состояния. Что выбрать?


React-разработчику важно знать о том, когда нужно использовать компоненты (Component), чистые компоненты (PureComponent) и функциональные компоненты без состояния (Stateless Functional Component).

В вышеприведённых примерах вы могли заметить, что вместо того, чтобы объявить Profile как Component, мы описываем его как PureComponent.

Разберёмся с особенностями различных видов компонентов.

▍Функциональные компоненты без состояния


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

const Billboard = () => (
  
    React
    

      
        #
      
      

        
React

        
Lorem Ipsum

      

    

  
);


Сущность таких компонентов заключается в том, что они являются обычными функциями и не имеют состояния. Фактически это — просто функции, которые возвращают JSX.

▍Чистые компоненты


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

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

Как узнать о том, что React выполняет ненужные операции повторного рендеринга компонентов? Для этого можно воспользоваться why-did-you-update — замечательным пакетом для React. Средства этого пакета позволяют узнать о выполнении операций повторного рендеринга компонентов, без которых можно обойтись.

6eb7c517a28769fd11a0e1c60e3eae92.png


Сообщения о возможности избежать повторного рендеринга компонентов

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

5. Инструменты разработчика React


Если вы серьёзно настроены на то, чтобы стать профессиональным React-разработчиком, тогда в ваш рабочий процесс следует включить инструменты разработчика React. Если вы уже писали на React, то, вероятно, видели выводимые в консоли предложения использовать инструменты разработчика. Они доступны для основных браузеров, таких, как Chrome и Firefox.

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

6. Использование встроенных условных выражений


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

Взгляните на этот фрагмент кода.


  {isRole('affiliate', user._id) &&
    
  }


Здесь имеется функция, которая проверяет роль пользователя (она должна иметь значение 'affiliate'), после которой имеется оператор && и компонент .

Вот что мне во всём этом нравится:

  • Мне не понадобилось писать отдельную функцию.
  • Мне не понадобилось использовать дополнительное выражение if в функции render.
  • Мне не пришлось создавать «ссылку», ведущую в какое-то другое место компонента.


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

Далее, мы связываем условное выражение с , используя &&. Благодаря такому подходу компонент будет выведен только в том случае, если условное выражение вернёт true.

7. Библиотеки сниппетов


Библиотеки сниппетов, заранее подготовленных шаблонных фрагментов кода, ускоряют процесс разработки и снижают количество ошибок. Вот как выглядит их использование. Я, работая в VS Code, создаю новый .js-файл. В нём ввожу текст rc и вижу то, что показано на рисунке ниже.

7af32945d1589fcaf4d32a296616d4d0.png


Сниппеты

Если выбрать то, что нужно, и нажать Enter, в редактор попадёт соответствующий фрагмент кода.

7526f21f0c0a18722320f3b481a4d112.png


Сниппет, вставленный в редактор

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

Существует множество библиотек сниппетов, которые можно интегрировать в различные редакторы. В данном случае используется библиотека ES7 React/Redux/React-Native/JS Snippets для VS Code.

8. О дополнительных учебных материалах


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

9. Применение Bit и StoryBook для организации удобной работы с компонентами


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

Кроме того, Bit можно использовать для организации компонентов на уровне команды, для преобразования их наборов в совместно используемые библиотеки, что облегчает работу с ними. Также здесь имеется интерактивная «песочница», средства тестирования компонентов в изоляции и другие возможности.

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

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

Итоги


Как повысить качество кода React-приложений? Согласно автору материала этому способствует следующее:

  1. Использование системы проверки кода.
  2. Применение propTypes и DefaultProps.
  3. Продуманный подход к созданию новых компонентов.
  4. Знание особенностей компонентов, чистых компонентов и функциональных компонентов без состояния.
  5. Использование инструментов разработчика React.
  6. Применение встроенных условных выражений.
  7. Использование библиотек сниппетов.
  8. Повышение квалификации разработчика за счёт освоения качественных руководств по React.
  9. Применение инструментов, вроде Bit и StoryBook, которые позволяют усовершенствовать процессы разработки и использования компонентов.


Надеемся, вам пригодятся эти рекомендации.

Уважаемые читатели! Что бы вы могли посоветовать тем React-разработчикам, которые хотят улучшить качество своего кода и профессионально вырасти?

1ba550d25e8846ce8805de564da6aa63.png

© Habrahabr.ru