Руководство по стилю написания кода React

Руководство по стилю написания кода React

От автора: в последнее время у меня был период жизни работы с React. И в моем путешествии мне было трудно найти хороший стиль написания кода, чтобы держать JSX и JS в чистом и понятном виде. Я придумывал свои собственные руководства по стилю, которыми хотел бы поделиться. Возможно, они окажутся полезны для вас и, конечно, не стесняйтесь делиться подобными рекомендациями в комментариях ниже.

Правило № 1: деструктурируйте props

Одной из моих любимых функций ES6 является деструктурирование. Она позволяет присваивать свойства объекта менее сложным переменным. Давайте посмотрим на пример.

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

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

Мы можем разбить его, присвоив все свойства props локальным переменным.

Используя ES6, мы можем поместить его в одну точную конструкцию следующим образом:

Чтобы все было точно, мы вставляем тернарного оператора (подробнее об этом позже) в свою собственную переменную, и вуаля.

Намного легче читается.

Правило № 2: один тег, одна строка

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

VS.

Если все, что вы делаете, создаёт базовый элемент и помещает свойства в HTML-тег, то не беспокойтесь о том, чтобы сделать так много функций и оберток, чтобы получить совершенно отдельный класс. Одна строка кода будет работать.

Вы даже можете проявить креативность с некоторыми функциями расширения ES6, когда будете передавать объект параметрам. Использование this.props.content будет автоматически помещать строку между тегами open и close.

Когда используются функции расширения:

Когда не требуются тернарные операторы

Когда передаются только атрибуты и содержимое HTML-тегов

Когда может использоваться повторно

Когда функция расширения не используется:

При динамических свойствах

Если требуются свойства массива или объекта

Если есть средство рендеринга, для которого требуются вложенные теги

Правило № 3: Правило трёх

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

Было бы неплохо иметь только одну строку свойств:

Но взгляните на это:

Или рендер:

Здесь слишком много кода для чтения. Поместите каждое свойство на следующую строку для чистого и понятного вида:

а также:

Правило № 4: Слишком много свойств?

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Предположим, мы создаем приложение сопоставления, в котором есть список сохраненных адресов и координата GPS для вашего текущего местоположения.

Текущая информация пользователя о местоположении и близости к избранному адресу должна быть в родительском компоненте приложения следующим образом:

Итак, мы создаём адрес и хотим отметить, как близко к нему находимся. Так мы передаем по крайней мере два свойства из приложения.

В приложении render ():

В функции рендеринга для адресного компонента:

Уже сейчас мы видим, каким громоздким становится код. Если взять два набора информации и разложить их на свои собственные объекты, то всё станет намного более управляемым.

В приложении constructor ():

До приложения render ():

В приложении render ():

В функции рендеринга для адресного компонента

Так намного чище. В React тоже есть несколько отличных способов гарантировать, что свойства объекта существуют и имеют определенный тип, используя PropTypes , чего мы обычно не можем сделать в JavaScript, но который просто является отличной OOP вещью.

Правило №5: Динамические рендеринги — Отображение массивов

Довольно часто в HTML мы пишем одни и те же основные части кода снова и снова, просто с несколькими ключевыми отличиями. Вот почему был создан React. Вы создаете объект со свойствами, возвращающими сложный динамический блок HTML, без необходимости писать каждую его часть повторно.

JavaScript уже имеет отличный способ делать списки подобной информации: массивы!

React использует функцию .map() для упорядочивания массивов, используя один параметр из массивов в виде key.

Вы даже можете использовать наши удобные функции распространения, чтобы сбрасывать весь список параметров с помощью объекта Object.keys()(имеется в виду, что нам все еще нужен key).

Правило №6: Динамический рендеринг — тернарные операторы React

В React вы можете использовать операторы для выполнения условного рендеринга точно так же, как объявление переменной. В правиле №1 мы рассмотрели это, указав, была ли наша собака хорошей или плохой. Не обязательно создавать целую строку кода, чтобы решить однословную разницу в предложении, но когда он становится крупным блоком кода, трудно найти те маленькие ? и те же : .

Или в настоящем тернарном стиле

Даже с нашим аккуратным отображением результатов вы можете видеть, как скобки гнездятся довольно плотно. Теперь представьте, если рендер имеет не одну линию. Он может довольно быстро стать нечитаемым. Рассмотрим альтернативу:

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

Правилом в этой ситуации является то, что если вы вносите в ваш объект JSX JavaScript более двух слов (например object.property), это должно быть сделано до вызова return.

Заключение

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

Используйте функции ES6. Шутки в сторону. Есть много фантастических функций, которые могут облегчить и ускорить вашу работу, тем более, ручную.

Пишите JSX только с правой стороны = или return.

Иногда вам будет нужен JavaScript в вашем JSX. Если JavaScript не подходит для одной строки (например, функции .map() или тернарного оператора), то это должно быть сделано заранее.

Если ваш код начинает выглядеть примерно так (<{${()}} />), то вы, вероятно, зашли слишком далеко. Возьмите самый низкий уровень за пределами текущего утверждения и напишите код перед ним.

Автор: Daniel Jauch

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree