Иногда для того, чтобы научиться делать, нужно научиться тому, чего не следует делать.

Эта статья также доступна в видеоформате.

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

Антипаттерн

Вот компонент React, который неявно требует трех свойств:

  • operationA (функция)
  • operationB (функция)
  • подзаголовок (строка)

Так в чем проблема?

Давайте посмотрим, что произойдет, если мы будем использовать этот компонент без свойств:

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

Если мы опускаем свойство operationA, компонент снова монтируется без ошибок, и нажатие кнопки Operation A ничего не делает (даже не выводит ошибку на консоли).

Если мы опустим свойство operationB, мы не получим никаких ошибок при монтировании компонента, но нажатие кнопки Operation B вызовет ошибку времени выполнения.

Этот пример был создан с помощью create-response-app. Когда он обнаруживает ошибки времени выполнения (в среде разработки), он останавливает приложение и отображает сообщение (см. Выше); с другими инструментами разработки и в других средах разработки, например, в производственной среде, приложение продолжает работать, и в консоли регистрируются только ошибки (см. ниже).

В конце концов, этот компонент автоматически выходит из строя, когда он монтируется с отсутствующими свойствами, и только в одном случае (operationB) есть какие-либо признаки проблемы.

Кстати, если вы используете редактор, например, Visual Studio Code, который поддерживает ESlint с сильной поддержкой React linting rules (eslint-airbnb-config), вы получите ошибки при редактировании этого компонента.

Лучший способ

По мере роста вашего приложения вы можете отловить множество ошибок с помощью проверки типов. Для некоторых приложений вы можете использовать расширения JavaScript, такие как Flow или TypeScript, для проверки типов всего приложения. Но даже если вы ими не пользуетесь, в React есть встроенные возможности проверки типов.

- React - Проверка типов с помощью PropTypes

примечание: подход, который мы здесь применяем, предполагает, что мы не используем проверку типов во время компиляции с помощью Flow или TypeScript; в этом случае можно было бы использовать другой (и лучший) подход к решению этой ситуации.

Вот компонент React, который явно требует трех свойств:

  • operationA (функция)
  • operationB (функция)
  • подзаголовок (строка)

В дополнение к поведению компонента PropTypesBad использование этого компонента без свойств вызовет явные ошибки консоли.

Свойства по умолчанию

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

  • operationA (функция)
  • operationB (функция)
  • подзаголовок (строка)

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

Дальнейшие действия

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