Facebook React - это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов (UI).
Когда я впервые начал писать код на React, я помню, как видел много разных подходов, сильно различающихся от учебника к учебнику. Итак, моя команда в PRDXN и я придумали руководство / список передовых практик (BP), которые помогут нам всем быстрее освоиться.
Ниже приводится наше руководство. Мы надеемся, что это поможет вам ускорить принятие и использование React; независимо от того, начинаете ли вы / новичок или опытный разработчик.
1. Поддерживайте организованную структуру папок:
Как и в любом проекте программирования / кодирования, это очень важно! Если файлы вашего проекта не организованы логически, вы и ваши соавторы можете запутаться и тратить драгоценное время на поиск файлов или редактирование неправильных файлов.
В PRDXN мы придумали следующую структуру папок, чтобы упростить задачу и сделать ее менее утомительной для всех. Нажмите "Играть", чтобы посмотреть.
2. Компоненты - блоки и деревья. Эй, вы дровосек с Javascript!
Компоненты - это сердце React. Компонент React - это, по сути, любая часть пользовательского интерфейса.
Создавайте логические блоки (группы) пользовательского интерфейса: всегда разделяйте компоненты на блоки (также называемые логическими группировками). Рассмотрите любой интерфейс приложения и начните разделять пользовательский интерфейс на более мелкие логические части. Каждый из этих фрагментов (групп) пользовательского интерфейса является потенциальным компонентом.
Дерево, ветви и дочерние ветви. Полное / полное представление пользовательского интерфейса (дерево или ствол) разделено на логические фрагменты (также называемые ветвями). Дерево становится начальным компонентом (компонентом компоновки), а затем каждый фрагмент в пользовательском интерфейсе (он же ветвь) станет подкомпонентом, который можно далее разделить на подкомпоненты (также известные как подветви). Это поддерживает организацию пользовательского интерфейса, а также позволяет данным и изменениям состояния логически перетекать из дерева в ветви, а затем во вложенные ветви.
3. Компоненты - функциональные и на основе классов:
Есть два типа компонентов: функциональные и основанные на классах.
Когда мне следует использовать функциональный компонент? Выберите функциональный компонент, если ваш компонент не делает ничего, кроме рендеринга свойств. Думайте о функциональных компонентах как о чистых функциях: они всегда будут отображаться одинаково и вести себя одинаково, учитывая одни и те же свойства. Кроме того, их не волнуют методы жизненного цикла; они являются компонентами без состояния.
Когда мне следует использовать компонент на основе классов? Если вашему компоненту требуются методы внутреннего состояния и жизненного цикла компонента, выберите компонент на основе классов. Проверьте это, чтобы лучше понять внутреннее состояние и методы жизненного цикла.
4. Реквизит! Реквизит вам! Реквизит мне! Но нет, мы говорим о React Props!
Концептуально компоненты подобны функциям JavaScript. Они принимают произвольные входные данные (называемые «реквизитами) и возвращают элементы React, описывающие, что должно появиться на экране ». Щелкните для источника.
Приведите верблюдов! Нет, вы можете оставить этих верблюдов в десерте. Мы говорим о CamelCase здесь. Всегда используйте camelCase для имен свойств. Свойства также можно рассматривать как атрибуты, и соглашение, установленное React, заключается в использовании camelCase для атрибутов JSX.
Поверьте, это правда, клянусь! Опускайте значение свойства, если оно явно истинно. Даже если мы не присваиваем опору истинное значение, это считается истинным значением, поэтому нет необходимости назначать «истина» в качестве значения опоре.
Избегайте использования индекса массива в качестве ключевой опоры; используйте вместо этого уникальный идентификатор: мы видели, как слишком много разработчиков использовали индекс элемента в качестве ключа при отображении списка, что ТАК нехорошо! Это то, что они неправильно пишут ...
Ключ - это единственное, что React использует для идентификации элементов DOM. Итак, что произойдет, если вы поместите элемент в список или удалите что-то из середины? Если ключ такой же, как и раньше, React предполагает, что элемент DOM представляет тот же набор компонентов (как и раньше). Но это не так!
Вот почему вам следует использовать уникальный идентификатор. Каждый элемент должен иметь постоянное и уникальное свойство (ID). И в идеале он (идентификатор) должен быть назначен при создании элемента. Так написано что-то вроде этого ...
Всегда определяйте явные свойства defaultProps для всех необязательных свойств. Предоставление defaultProps означает, что читателю вашего кода не нужно ничего предполагать, потому что он узнает значение по умолчанию для свойства, просто посмотрев на defaultProps во время рендеринга компонентов.
Как видите, есть небольшие, но очень важные вещи, которые делают ваш код React относительно безошибочным в процессе проверки. Если вы заранее потратите время на изучение этих передовых методов, и их использование, это означает, что вы будете тратить меньше времени на переписывание кода, чтобы исправить свои ошибки, что даст вам больше времени для занятий любимым делом. А если заниматься любимым делом означает писать код, у вас будет больше времени на написание кода для другого проекта!
Дополнительные рекомендации PRDXN по React можно найти здесь, на Github: https://github.com/prdxn/React-JS-Checklist. Пожалуйста, не стесняйтесь делиться и вносить свой вклад в этот список. А если у вас возникнут проблемы с доступом, напишите нам в комментариях.
Заинтересованы в работе с PRDXN в качестве клиента или сотрудника? Тогда позвони нам! Посетите www.prdxn.com для получения дополнительной информации, включая контактную информацию.
