Заметки из презентации FITC Web Unleashed 2016 Джареда Форсайта (слайды)

Цель инструментов отладки — пролить свет на черный ящик. Академия Хана была первым промышленным использованием React примерно с 1500 компонентами — отладка очень быстро стала очень важной. Поскольку некоторые способы исправления ошибок требуют больше усилий, чем другие, важно заранее решить, стоят ли они вложений.

Предупреждения по умолчанию

По умолчанию React помечает и предупреждает вас о некоторых ошибках, что полезно для выделения проблем, которые могут указывать на более серьезные проблемы. Если вы нажмете некоторые из этих предупреждений, например. «Ошибочный тип пропса», ищите имя файла и номер строки для его отладки (для этого вам понадобится jsx-source). Некоторые ошибки не дают номер строки сразу, но вы можете открыть трассировку стека и посмотреть метод рендеринга, чтобы найти его. Есть более сложные предупреждения, когда ошибка связана с состоянием приложения в этот момент. В этом случае перейдите туда, где срабатывает предупреждение, добавьте точку останова, перезагрузите страницу, затем в стеке вызовов перейдите к методу рендеринга, чтобы найти номер строки.

Отладка

Мы освещаем линию еще ярче с помощью Инструментов разработчика React. С помощью React DevTools при выборе компонента в иерархии вы можете просматривать и изменять его свойства и состояние на вкладках Свойства и Состояние. Это может быть очень полезно для получения обзора всех свойств компонента и наблюдения за их изменением. Если вам нужно больше контроля, вы можете получить доступ к экземпляру выбранного компонента, набрав $r в консоли. Вы можете использовать $r для дальнейшего изучения и изменения состояния компонента. Обратите внимание, что в представлении иерархии красные треугольники указывают, какие компоненты имеют состояние. React devTools также может помочь вам понять, почему что-то работает медленно, установив флажок отслеживать обновления реакции. Это показывает вам, какие и в какой степени другие компоненты затрагиваются, когда вы что-то делаете на странице. Затронутые компоненты выделяются цветовой рамкой, которая отражает время между обновлениями: чем короче обновления, тем краснее цвет.

Выявление ошибок

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

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

Linting (с eslint) прост в настройке, и есть несколько правил, которые должен соблюдать каждый:

  1. no-undef запрещает вам использовать переменные, которые не определены,
  2. no-duplicate-props отлавливает случайно дублированные свойства,
  3. вы можете проверить типы свойств с помощью react/prop-types, чтобы убедиться, что вы устанавливаете только те свойства, которые указаны в ваших компонентах реакции, и
  4. react/forbid-prop-types зарегистрирует ошибку, если вы используете слишком общий тип реквизита «массив и объект».

Типовые аннотации вызовут ошибку еще до того, как вы запустите код. Они тем ценнее, чем больше вы их используете.

Автоматизированное тестирование – это наиболее затратный по времени способ обнаружения ошибок. Автоматизированное тестирование хорошо подходит для проверки сложного поведения, например. настройка алгоритма или выполнение регрессионного тестирования, которое обеспечивает сохранение необходимого поведения в приложении, например. что ваша кнопка регистрации все еще находится на странице. Однако регрессионное тестирование является хрупким — что, если вы хотели изменить эту кнопку регистрации? Фикстуры позволяют проводить регрессионное тестирование с меньшими трудностями. Фикстура — это список реквизитов, необходимых для рендеринга компонента. Вы можете создать и визуализировать фикстуру для каждого состояния, в котором может находиться компонент, и убедиться, что предупреждения не выводятся. Снимки Jest — это способ сделать еще один шаг вперед и провести визуальное регрессионное тестирование. Вы предоставляете пример того, как вы собираетесь создать экземпляр своего компонента, и шутку, которая будет выполнять сравнение пользовательского интерфейса и создавать снимки, показывающие, как ваши обновления влияют на все места, где используется компонент. Однако визуальное регрессионное тестирование может быть привередливым. Chrome не является детерминированным в отношении рендеринга SVG, и визуальный регрессионный тест уловит шум в том, как они рендерятся.

Предотвращение ошибок

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

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