Некоторые основные вещи, которые следует помнить при написании кода Reactjs:
Reactjs — популярная интерфейсная библиотека от Facebook. Хотя Reactjs все равно, как вы пишете приложения Reactjs. Но важно следовать некоторым рекомендациям Reactjs, чтобы наши проекты оставались чистыми, безопасными и масштабируемыми.
В этом руководстве мы поговорим о некоторых передовых методах Reactjs, которые нам действительно необходимо реализовать для готового к работе приложения Reactjs. Хотя эти передовые методы не являются обязательными, они важны, если рассматривать их с точки зрения опытного разработчика. Без лишних слов давайте выясним, каковы эти лучшие практики
01) Держите свой код СУХИМ:
сохранение вашего кода СУХИМ — это общая концепция программирования, не ограничивающаяся Reactjs. Но важно не повторять код. Если вы повторяете код, уберите логику и функциональность, чтобы создать функцию.
То же самое верно и для компонентов React. Например, если вам нужно использовать кнопку несколько раз в вашем приложении для реагирования. Сделайте кнопку универсальной, чтобы ее можно было использовать в соответствии с требованиями.
02) Убираем лишние комментарии из кода:
Добавляйте комментарии там, где это необходимо. Не используйте чрезмерно комментарии в своем коде. Так вы не запутаетесь, если позже снова прочитаете свой код или попытаетесь его изменить.
Кроме того, убедитесь, что вы удалили отладчики, журналы консоли и другой код, используемый для разработки, прежде чем выпускать свое реагирующее приложение.
03) Используйте форматировщики кода:
Формировать код Reactjs сложнее, чем его писать. А когда у вас есть код HTML и JavaScript в одном файле, это становится сложнее, как будто это уже было недостаточно сложно. К счастью, в мире есть форматировщики кода, которые упрощают нашу жизнь. Одним из популярных средств форматирования кода является Prettier.
04) Напишите больше тестов:
Хорошей практикой является изучение всех возможных сценариев использования компонента перед его развертыванием. Написание модульных тестов значительно избавит вас от множества хлопот. Jest и Enzyme — популярные фреймворки модульного тестирования на основе React.
05) Соглашения об именах:
Комментарии. Используйте все заглавные буквы для глобальных комментариев, например, const DEFAULT_USER = «Джон Доу».
Компоненты React. Используйте регистр pascal при именовании компонентов React, например Header.js, Login.js, MainPage.js и т. д.
Обычный JavaScript: используйте нотацию верблюжьего регистра при написании функций и переменных JavaScript, например submitHandler(), initialState и т. д.
06) Используйте camelCase для именования объектов:
Используйте нотацию camelCase при написании реквизита. Хотя, это не правило, это стандарт. И это делает ваш код понятным для других программистов.
Лучшие практики архитектуры Reactjs:
07) Не используйте атрибуты DOM в качестве имен свойств:
Не используйте атрибуты DOM в качестве имён реквизитов, это сделает код запутанным. Таким образом, другие программисты, работающие над вашим кодом, не будут их ожидать.
ПЛОХО:
ХОРОШО:
Вместо использования onClick, который является свойством dom для элемента ввода, используйте все, что делает ваше событие, например, onAddItem.
Также читайте: 10 советов профессионалам по CSS, кодируйте не так
08) Разложить на мелкие компоненты
Чтобы написать чистый код Reactjs, разложите большие компоненты на более мелкие. Это сделает ваши компоненты компактными и простыми в отладке и работе. Кроме того, извлекайте логику в разные файлы, чтобы еще больше упростить компоненты.
Кроме того, создайте разные папки для разных предметов. Например, если у вас есть два разных компонента, такие как компоненты входа и выхода, вы можете поместить их в отдельную папку с именем AuthComponents. Точно так же вы можете поместить их вместе с другими связанными компонентами в разные папки.
09) По возможности используйте самозакрывающиеся теги:
Если у вас есть компонент, у которого нет дочерних элементов, рекомендуется использовать самозакрывающиеся теги. Используйте закрывающие теги только в том случае, если вам нужно отобразить дочерние элементы.
ПЛОХО: ХОРОШО:
10) Используйте функциональные и классовые компоненты по мере необходимости:
Если вы хотите визуализировать пользовательский интерфейс, используйте только функциональные компоненты, поскольку они эффективны при визуализации пользовательского интерфейса. Если вам нужна логика внутри вашего компонента, отдайте предпочтение компонентам на основе классов.
Кроме того, там чрезмерно используются как классы, так и функциональные компоненты. В старых кодовых базах вы обязательно встретите компоненты на основе классов. Итак, лучше научиться использовать как классовые, так и функциональные компоненты. Также в современных проектах Reactjs предпочтение отдается функциональным компонентам.
Также читайте: Scss, Bootstrap и Tailwind CSS
Лучшие практики структуры папок Reactjs:
11) Макет папки:
Очень важно иметь прочную структуру папок, чтобы сделать ваш Reactjs масштабируемым. Вероятно, это первый шаг, над которым вы будете работать, начиная новый проект Reactjs.
Хотя ваш проект может отличаться в зависимости от сложности и спецификации вашего проекта, вот некоторые рекомендации, которые могут вам помочь.
- Создайте две разные папки для src и общедоступных файлов. Общедоступные файлы включают index.html, фавиконы и другие файлы. В то время как файлы src обычно содержат исходный код вашего приложения. Папка Src может включать в себя другие папки, такие как компоненты, страницы, хранилище и т. д. Проекты Reactjs, созданные с помощью npm create-react-app, создают эти папки по умолчанию.
- В папке src создайте отдельные папки для компонентов, магазина и страниц. Компоненты будут содержать небольшие компоненты, которые можно использовать внутри страниц, таких как кнопки, карточки и т. д. Магазин будет содержать общий магазин вашего приложения Reactjs, в зависимости от ваших требований, у вашего приложения может не быть магазина. Наконец, поместите все свои страницы в папку pages. Страницы могут содержать MainPage, LoginPage, PostsPage и т. д.
- Соедините связанные компоненты. Например, компоненты входа в систему и выхода из системы могут быть объединены в отдельную папку с именем AuthComponets.
12) Детский реквизит:
Иногда требуется передать функции в качестве реквизита дочернему компоненту. Используйте дочерние реквизиты для передачи функций дочерним компонентам. Таким образом, по триггеру события они могут выполнить эту функцию и передать полезную нагрузку в качестве аргументов функции.
Лучшие практики Reactjs JavaScript:
13) Используйте литералы шаблонов:
Шаблонный литерал — это функция ES6, упрощающая конкатенацию строк. Используйте литералы шаблонов для создания строк везде, где это необходимо.
Кроме того, с литералами шаблонов вы можете использовать переменные внутри строк, используя нотацию $.
ПЛОХО:
const name = "My name is " + myName;ХОРОШО:
const name = "My name is " + myName;Также прочтите: Галерея изображений сетки в CSS, за 5 минут
14) Используйте оператор распространения ES6:
Оператор распространения JavaScript ES6 позволяет копировать объект или массив в другой объект или массив. Используйте оператор распространения для передачи свойств компоненту, если он ожидает те же имена свойств, что и ключи в объекте.
СИНТАКСИС:
const newArray = [...oldArray, 2, 4]Теперь новый массив состоит из элементов старого массива 2 и 4.
15) Используйте логические или тернарные операторы для условного рендеринга компонентов:
Используйте свойство короткого замыкания JavaScript для условного рендеринга компонентов. Например, если вам нужно отобразить компонент Post. Если isAuth имеет значение true, вы можете использовать оператор and. Если isAuth имеет значение true, выполнение перейдет к компоненту Post, а если false, произойдет короткое замыкание, и компонент не будет отображаться. То же самое относится к оператору or: компонент справа от оператора or будет отображаться только в том случае, если isAuth имеет значение false.
Кроме того, если вам нужно отобразить два разных компонента в зависимости от того, является ли выражение истинным или ложным, вы можете использовать тернарный оператор.
Логические операторы:
{isLogin && <LoginForm/> } {isLogin || <SignupForm/> }В приведенном выше примере кода форма входа будет отображаться только в том случае, если isLogin имеет значение true. И SignupForm будет отображаться только в том случае, если isLogin имеет значение false. Это поведение Javascript по умолчанию, известное как короткое замыкание. Короткое замыкание просто означает, что если левая часть оператора and истинна, то будет учитываться правая часть, а если она ложна, она не имеет значения, независимо от того, приводит ли она к истине или к ложности. То же самое верно и для оператора or. Если LHS истинно, нет необходимости проверять, истинно RHS или нет.
Тернарный оператор:
В приведенном выше примере кода мы используем тернарный оператор для условной визуализации различных элементов. Если значение isLogin равно true, будет отображаться LoginForm, а если значение false, то будет отображаться компонент SignupForm.
16) Используйте неявный возврат:
Пишите стрелочные функции вместо объявления функций и выражений, чтобы сделать код короче. Кроме того, используйте неявный возврат стрелочной функции, чтобы ваш код выглядел красиво и короче.
ПЛОХО:
const idArray = userArray.map(user =>{ <strong>return user.id</strong> })ХОРОШО:
const idArray = userArray.map(user<strong> =>user.id</strong>);В приведенном выше примере метод карты используется для получения идентификаторов всех пользователей в пользовательском массиве. Метод карты возвращает массив идентификаторов для каждого пользователя.
17) Используйте функцию карты:
Используйте функцию карты, если вам нужно отобразить массив компонентов на основе некоторых данных. Например, если у вас есть массив из 6 пользователей и вам нужно отобразить компоненты User для каждого из них, следуйте приведенному ниже коду.
function AllNews(props) { return ( props.allNews.map(news => { <NewsItem key="{news.id}" title="{news.title}" details="{news.details}" time="{news.time}"> }) ) }</NewsItem>В приведенном выше примере кода мы используем метод карты, чтобы вернуть компонент NewsItem для каждого элемента в массиве allNews. Таким образом мы отображаем список компонентов на основе массива allNews.
17) Используйте деструктурирование:
Деструктуризация позволяет нам извлечь элемент или элементы из массива или объекта. В Reactjs компонент получает свойства в виде объекта. Итак, чтобы получить значения из полученного объекта реквизита, используйте деструктурирование.
С РАЗРУШЕНИЕМ:
function AllNews(props) { return ( props.allNews.map(news => { <NewsItem key="{news.id}" title="{news.title}" details="{news.details}" time="{news.time}"> }) ) }</NewsItem>С РАЗРУШЕНИЕМ:
function AllNews(props) { const {id, title, details, time} = props; return ( props.allNews.map(news => { <NewsItem key="{id}" title="{title}" details="{details}" time="{time}"> }) ) }</NewsItem >18) Используйте сокращение JSX:
Иногда вам нужно передать логическое значение в качестве реквизита, и если оно уже определено, вы можете просто передать его. Например
Лучшие практики Reactjs для повышения производительности приложения:
19) Используйте памятку для улучшения производительности кода:
Хук useMemo() предотвращает рендеринг компонента каждый раз, когда его родитель изменяется или повторно рендерится.
Кроме того, вы можете обернуть функции с помощью хука useCallback(), если вы не хотите, чтобы они переопределялись при рендеринге каждого компонента. Хук callback() принимает массив зависимостей. Элементы в массиве зависимостей решают, когда функция должна быть повторно объявлена. Проще говоря, функция будет переобъявлена, если элементы зависимости изменятся.
20) Используйте функциональные компоненты с крючками:
Управлять состоянием функциональных компонентов легко с помощью хуков. Если вам требуется управление состоянием в вашем компоненте, лучше использовать функциональные компоненты. Такие хуки, как useState(), useReducer(), useCallback(), useContext(), упрощают работу с управлением состоянием реагирования и значительно сокращают объем кода.
21) Не смешивайте JSX и JS:
JSX — это специальный синтаксис, используемый Reactjs для рендеринга компонентов. Никогда не смешивайте JSX с обычным JavaScript. Потому что это сделает ваш код менее читабельным и трудным для сопровождения и отладки.
22) Избегайте ненужного использования состояния:
Не используйте состояние чрезмерно. Это снизит производительность вашего приложения Reactjs. Например, если вам не нужно записывать каждое нажатие клавиши в текстовом поле. Используйте хук useRef(), чтобы получить значение поля ввода. Это уменьшит рендеринг компонентов и сэкономит вычислительные ресурсы.
23) Избегайте объявления функции внутри метода рендеринга:
Если вы используете компоненты на основе классов, не объявляйте функции внутри метода рендеринга. Вместо этого объявите их как отдельные методы и вызовите их в методе рендеринга. Это сделает ваш метод рендеринга простым и чистым.
Лучшие практики CSS Reactjs:
24) Избегайте ненужных div:
Не используйте div в качестве обертки, потому что если у вас много вложенных компонентов, это приведет к супу из div. Вместо этого используйте Fragment, предоставленный Reactjs, чтобы обернуть одноуровневые компоненты внутри компонента.
ПЛОХО: ХОРОШО:
25) CSS в JS:
Не используйте встроенный CSS со стилем. Кроме того, не создавайте файл CSS, как традиционный. Но создайте файл с .module.css. Это гарантирует, что классы, объявленные в этом файле, уникальны и недоступны в глобальной области видимости. Модуль .module указывает react добавить определенный набор символов к имени класса, чтобы сделать его уникальным и недоступным для других файлов.
Лучшие практики безопасности Reactjs:
26) Добавьте безопасную аутентификацию:
Большинству приложений требуется, чтобы пользователи вошли в систему для доступа к содержимому. Аутентификация должна быть безопасной, чтобы не подвергать пользователей опасности хакеров. Существует множество сторонних библиотек, которые помогают с аутентификацией. Некоторые из них
27) Защитите свое приложение React от XSS:
Дезинфицируйте вводимые пользователем данные, такие как поиск, электронная почта, пароль и поля, чтобы исключить вредоносные и недействительные вводимые пользователем данные. Если вы не откажетесь от злонамеренного пользовательского ввода, это может привести к раскрытию вашего сервера и личных файлов.
Заключение:
Важно помнить об этих рекомендациях, если вы хотите, чтобы ваше приложение Reactjs было безопасным и работало хорошо. Хотя эти методы не являются обязательными, они являются стандартами для хорошего приложения Reactjs. Если вы считаете этот урок полезным, пожалуйста, оставьте отзыв. Спасибо
Первоначально опубликовано на https://codipher.com 9 апреля 2022 г.
