Автор оригинала: FreeCodeCamp Community Member.
Нирмаля Гош
При работе кода отзывы разработчики редко получают достаточно времени, чтобы по-настоящему понять каждую строку кода, которую мы рассматриваем. Вместо этого мы должны быстро размышлять о различных ситуациях, когда этот код может потерпеть неудачу.
Поэтому каждый раз, когда я проверяю код, я ищу определенные моменты, чтобы помочь мне быстро понять код.
Эта статья поможет вам понять, как вы можете написать лучший код, чтобы другие разработчики могли лучше понять его. Эта статья даст вам быстрое введение в определенные методы, которые я использую при разработке моих компонентов, и покажу вам, как вы можете сделать то же самое.
Обратите внимание, что мы будем придерживаться в основном в rectjs здесь, но что некоторые из этих моментов, которые могут применить к использованию других библиотек JavaScript.
Совет № 1: Всегда используйте типы опоры, чтобы определить все реквизиты в ваших компонентах
Типы опоры Это проверка типа выполнения для реквизитов React и аналогичных объектов.
Типы опоры помогут вам проверить, требуется ли желаемый тип опоры в ваш компонент или нет.
Если правильный тип определенного опоры не передается в ваш компонент, то пакет будет бросать предупреждение в консоли вашего браузера.
В приведенной выше ручке вы можете проверить консоль, и она бросит следующее предупреждение:
"Warning: Failed prop type: Invalid prop `message` of type `string` supplied to `Hello`, expected `array`. in Hello"
Из вышеупомянутого предупреждающего сообщения, довольно ясно, что мы передаем строку в компонент Hello, но компонент ожидает, что сообщение PROP имеет тип массива типа.
Совет № 2: Используйте DisplayName, чтобы определить определенное имя для вашего компонента
DisplayName Строка используется в отладке сообщений.
Если вы не используете DisplayName в ваших компонентах, вы должны использовать его от этого.
Обычно, если вы отлажете свой компонент, используя Инструменты разработчика реагирования , вы увидите компоненты, потому что он выводится из названия функции или класса, который определяет компонент.
Однако, если у вас есть ситуация, где у вас есть два компонента с тем же именем (кнопка, выпадают и т. Д.), Тогда вам может потребоваться переименовать ваши компоненты. В противном случае вы не сможете различать их.
Вы можете решить вышеупомянутую проблему с помощью DisplayName.
Вы просто переименовывайте один из компонентов с помощью DisplayName.
В приведенном выше примере вы можете увидеть, что, хотя имя класса является компонентом, вы увидите название «Hello» в инструменте разработчика RACT, потому что он имеет Hello в качестве своего отображения.
Это очень полезно для целей отладки и часто встречается.
Совет № 3: Используйте Linter, чтобы ваш код легче просмотреть
Если вы заботитесь о своем здравоохранении, вы должны использовать Linter на вашей кодовой базе.
ЛИНТЕРЫ помогут вам сделать ваш код похожим на других собратьев в вашей компании. Следуя строгим набором правил, вы можете быть уверены, что вся база кода будет соответствовать.
Например, вы можете заставить других разработчиков использовать запястья в конце строки. Если они этого не сделают, то Linter бросит ошибку или предупреждение на основе ваших настроек.
Линтер, который я следую в основном это Eslint Но вы можете выбрать любой, кто подходит для ваших потребностей.
Совет № 4: Просмотрите свой собственный код перед созданием запроса на тягу
Независимо от того, решаете ли вы ошибку или разработка новой функции, шансы состоят в том, что вы будете толкать изменения и создать запрос на тягу быстро, когда вы спешите.
Проблема с этим – вы даже не можете просматривать свои собственные изменения. В результате вы можете пропустить места, которые вы можете ревертировать и сделать его лучше.
Из моего опыта, просмотрев мои собственные изменения, иногда я мог бы сделать его более исполнителем, разделить большие функции на несколько меньших небольших и сделать код более модульным.
Раньше я никогда не рассматривал свой собственный код. Но практикуя эту привычку, я чувствую, что это улучшает мое кодирование, и это может помочь вам тоже.
Совет № 5: Ваш первый черновик не всегда лучший
Многие из вас уже знают это. Первая итерация не всегда лучшая.
Вы должны посмотреть на свою первую итерацию кодирования и подумать о функциях, которые вы могли бы пропустить.
Один из способов исправить это может проводить тестовое развитие (TDD), которая является отличной практикой, но редко следовало. Если вы следуете подходу TDD, вы первая итерация может быть лучшим. Но вы должны искать лучший подход.
Возьмите свое время, чтобы подумать о том, как вы хотите продолжить еще до написания одной строки кода, и когда вы закончите реализовать функцию или исправить ошибку, посмотрите на ваши изменения и подумайте, как вы можете сделать его лучше.
Совет № 6: Разделить свой код на несколько меньших функций
Разделение ваших больших функций на несколько меньших функций сделает меньшие функции более многоразоваемыми. Они также станут намного проще тестировать.
Вы также можете создать много утилитных файлов, которые могут помочь вам удалить дубликат кода из нескольких файлов.
После создания нескольких файлов посмотрите на них, и вы увидите, что существует много дублированных строк кода. Вы можете взять эти строки создавать утиливый файл. Затем вы можете повторно использовать один и тот же файл утилиты в нескольких файлах.
Совет № 7: Создайте несколько файлов вместо того, чтобы написать большой файл
Обзор одного большого файла всегда сложнее, чем просмотр нескольких небольших файлов.
Если вы разделите свой код на несколько небольших файлов, и каждый файл содержит только одну логику, то для рецензента становится очень легко просмотреть этот файл.
Совет № 8: Будьте очень осторожны, название ваших файлов
Еще одна вещь, которую вы должны помнить, вот это, если вы назвать свои файлы в соответствии с работой, которую они выполняют, она также поможет вам в будущем, а также другим разработчикам понять, что делает файл на самом деле.
Посмотрев на имя файла, другие разработчики должны понимать, что должен делать файл.
Например, dropdown.js – хорошее имя но это очень общий И если вы используете его в нескольких местах в том же каталоге, вы можете назвать его как TopDropDown.js, dotedropdown.js, который плохо.
Лучшим способом будет префикс их с работой, которую они должны выполнять. Например, userdropdown.js, filedropdown.js и т. Д.
Совет № 9: всегда пишите тесты для вашего кода
Я не могу подчеркнуть достаточно важности этого момента. Тесты Заполните свой код.
После разработки функции вы можете почувствовать, что она работает, и она работает. Но могут быть (и, скорее всего, будут) краевые случаи, когда это может не работать. Тесты помогут вам определить эти случаи.
Очевидно, что писать тестовые случаи увеличит время, которое вам нужно написать свой код. Но он всегда поможет вам устранить потенциальные ошибки, которые могут обрезать в будущем.
Вы должны найдите время, чтобы написать тесты, если вы заботитесь о своем приложении.
Верхний # 10: не злоупотребляйте об ошибке, обрабатывающую крючок жизненного цикла
Реагистрация 16 представила лучший способ Обращение с ошибками Использование функции называется границы ошибок.
По сути, границы ошибок представляют собой компоненты реагирования, которые вызывают ошибки JavaScript в любом месте в своем дочернем дереве дочерней части, регистрируйте эти ошибки и отобразите защиту от упаковки, а не в разбивке дерева компонентов.
Если логика для UI Foxback UI присутствует в вашем компонент ErrorBoundary, вы можете заключить капсульный компонент внутри этого компонента ErrorBoundary.
Это хороший способ, которым вы можете показать ответные интерфейсы для ваших ошибок. Но вам не нужно обернуть все ваши компоненты с помощью элементарирующего компонента.
Вы можете положить свой элементный компонент только в нескольких стратегических местах где вам они нужны.
Заключение
Я надеюсь, что эти очки помогут вам написать лучший код ReactJS и BetterJavascript Code в целом. Дайте мне знать, если вы используете еще несколько подходов, которые я пропустил здесь.
Оригинал: “https://www.freecodecamp.org/news/10-points-to-remember-thatll-help-you-master-coding-in-reactjs-library-d0520d8c73d8/”