Иногда для того, чтобы научиться делать, нужно научиться тому, чего не следует делать.
Эта статья также доступна в видеоформате.
Примеры из этой статьи доступны для скачивания.
Антипаттерн
Вот компонент 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 (функция)
- подзаголовок (строка)
В этом случае установка этого компонента без свойств отображается должным образом, а нажатие кнопок имеет реализации по умолчанию.
Дальнейшие действия
Если вы нашли эту статью полезной, я бы посоветовал вам подписаться на меня, так как я активно пишу больше в том же духе.