15 Реагирайте най-добрите практики, които трябва да следвате през 2020 г.

Реагирайте на най-добрите практики


Ако сте разработчик на интерфейси, който се занимава с изграждането на интерактивни потребителски интерфейси, най-вероятно имате React в инструментариума си. Докато работите върху вашите творения, задвижвани от React, трябва да внимавате да правите нещата в съответствие с най-добрите практики на React. Това ще ви помогне да запазите кода си по-добре организиран.

Както знаете, React е библиотека, създадена от Facebook и позволява интегриране с много интересни компоненти. Всъщност всеки програмист може да създаде свои собствени компоненти и да ги направи достъпни за общността.

Днес поемаме главата на темата и ви показваме най-основните от най-добрите практики на React:

Contents

�� 1. Запазете компонентите малки и специфични за функцията

Както всички знаем, с React е възможно да има огромни компоненти, които изпълняват редица задачи. Но по-добър начин за проектиране на компоненти е да ги поддържате малки, така че един компонент да съответства на една функция. В идеалния случай, един компонент трябва да направи конкретен бит на вашата страница или да промени конкретно поведение. Има много предимства за това:

  • Функционалните компоненти могат да бъдат самостоятелни, което улеснява тестването и поддръжката.
  • Всеки малък компонент може да се използва повторно в множество проекти.
  • Компонентите, изпълняващи общи функции, могат да бъдат предоставени на общността.
  • С по-малките компоненти е по-лесно да се внедрят оптимизации на производителността.
  • По-лесно е да актуализирате по-малки компоненти.
  • По-големите компоненти трябва да работят по-трудно и може да са трудни за поддръжка.

Балансът между създаването на един кратък компонент и създаването на множество компоненти, специфични за функцията, може да варира от организация до организация. В края на краищата можете да имате толкова компоненти, колкото искате, и да ги комбинирате по всякакъв начин, по който искате да постигнете същия краен резултат.

♻️ 2. Повторната употреба е важна, затова поддържайте създаването на нови компоненти до необходимия минимум

Придържайки се към правилото за една функция = един компонент, можете да подобрите повторната употреба на компонентите. Това означава, че трябва да пропуснете да опитате да изградите нов компонент за функция, ако вече съществува компонент за тази функция.

Като използвате повторно компоненти във вашия проект или в произволен брой проекти, не само ще постигнете последователност, вие също ще допринасяте за общността.

От друга страна, ако някой компонент стане огромен, непроходим и труден за поддръжка, по-добре е да го разделите на толкова по-малки компоненти, колкото е необходимо.

Например, можете дори да отидете по-далеч и да създадете компонент на Button, който да борави с икони. След това всеки път, когато имате нужда от бутон, ще имате компонент, който да използвате. Увеличаването му ще ви позволи да покриете много случаи с една и съща част от кода. Трябва да се прицелите някъде по средата. Компонентите ви трябва да са достатъчно абстрактни, но не трябва да са прекалено сложни.

клас IconButton разширява React.Component {
[…]
render () {
връщане (

);
}
}

�� 3. Консолидирайте дублиращия се код – изсушете вашия код

Общо правило за целия код е да го поддържате възможно най-кратко и кратко.

Тук също не е по-различно, тъй като най-добрите практики на React също ви инструктират да държите кода кратък и точен. Един от начините да направите това е да избегнете дублирането – не се повтаряйте (DRY).

Можете да постигнете това, като разгледате кода за модели и прилики. Ако откриете такъв, е възможно да повтаряте код и има възможност да премахнете дублирането. Най-вероятно малко пренаписване може да го направи по-сбито.

Това разчита до голяма степен на принципа на повторна употреба в React. Да речем, че искате да добавите няколко бутона, които съдържат икони, вместо да добавяте маркировка за всеки бутон, можете просто да използвате компонента IconButton, който показахме по-горе. Можете дори да отидете по-далеч, като картографирате всичко в масив.

const бутони = [‘facebook’, ‘twitter’, ‘youtube’];

връщане (

{
button.map ((бутон) => {
връщане (

);
})
}

);

�� 4. Поставете CSS в JavaScript

Когато започнете да работите върху проект, често срещана практика е всички CSS стилове да се съхраняват в един SCSS файл. Използването на глобален префикс предотвратява всякакви потенциални сблъсъци с име. Когато обаче вашият проект се разшири, това решение може да не е възможно.

Има много библиотеки, които ви позволяват да пишете CSS в JS. EmotionJS и бляскав са двата най-популярни CSS в JS библиотеки.

Ето пример за използването на EmotionJS във вашия проект. EmotionJS може да генерира пълни CSS файлове за вашето производство. Първо инсталирайте EmotionJS с помощта на npm.

npm install – запазване @ емоция / ядро

След това трябва да импортирате EmotionJS във вашето приложение.

import {jsx} от „@ emotion / core“

Можете да зададете свойствата на елемент, както е показано в фрагмента по-долу:

нека Компонент = реквизит => {
връщане (

)
}

Ето линка към пълното документация на EmotionJS.

�� 5. Коментирайте само когато е необходимо

Прикачете коментари, за да кодирате само когато е необходимо. Това е не само в съответствие с най-добрите практики на React, но също така има две цели едновременно:

  • Той ще запази кода визуално без затруднения.
  • Ще избегнете потенциален конфликт между коментар и код, ако случайно промените кода в някакъв по-късен момент.

�� 6. Назовете компонента след функцията

Добре е да наименувате компонент след функцията, която изпълнява, така че да бъде лесно разпознаваем.

Например, ProductTable – той предава незабавно това, което прави компонентът. От друга страна, ако посочите компонента въз основа на нуждата от кода, това може да ви обърка в бъдещ момент.

Друг пример е за предпочитане да се назовава компонент Avatar, така че да може да се използва навсякъде – за автори, потребители или в коментари. Вместо това, ако посочим компонента AuthorAvatar в контекста на неговото използване, ще ограничим полезността на този компонент.

Освен това, именуването на компонент след функцията го прави по-полезно за общността, тъй като е по-вероятно да бъде открит.

Use 7. Използвайте главни букви за имена на компоненти

Ако, както повечето хора, използвате JSX (разширение на JavaScript), имената на компонентите, които създавате, трябва да започват с главни букви. Например, ще посочвате компоненти като SelectButton вместо selectbutton или Menu вместо меню. Правим това, за да може JSX да ги идентифицира различно от HTML маркерите по подразбиране.

По-ранните версии на React поддържаха списък с всички вградени имена, за да ги разграничат от персонализираните имена. Но тъй като списъкът се нуждаеше от постоянно актуализиране, това беше бракувано и столиците станаха норма.

В случай, че JSX не е избраният от вас език, можете да използвате малки букви. Това обаче може да намали повторната употреба на компоненти извън вашия проект.

�� 8. Имайте предвид другите конвенции за именуване

Когато работите с React, обикновено използвате файлове JSX (разширение на JavaScript). Всеки компонент, който създавате за React, следователно трябва да бъде посочен в случая Pascal или горната част на камилата. Това се превежда на имена без интервали и главни букви на първата буква от всяка дума.

Ако искате да създадете функция, която изпраща формуляр, трябва да го назовете SubmitForm в горния случай на камила, а не submitForm, submit_form или submit_form. Горната калъф на камила се нарича по-често Pascal case. Ето и по-нататък списък с примери на имена на променливи и функции в случая Pascal.

�� 9. Отделни състоятелни аспекти от изобразяването

Компонентите в React могат да бъдат състоятелни или без гражданство. Компонентите на състоянието съхраняват информация за състоянието на компонента и предоставят необходимия контекст. За разлика от тях компонентите без състояние нямат памет и не могат да дадат контекст на други части на потребителския интерфейс. Те получават реквизит (входове) само от родителския компонент и ви връщат JSX елементи. Те са мащабируеми и многократни за използване и подобни на чистата функция в JavaScript.

Една от най-добрите практики на React е да държите вашата логика за зареждане на данни, отделена от вашата логика без състояние. По-добре е да имате един състоятелен компонент за зареждане на данни и друг компонент без състояние, който да показва тези данни. Това намалява сложността на компонентите.

По-късните версии на React v16.8 имат нова функция – React Hooks, които изписват състоятелни компоненти, свързани с функциите. Това в крайна сметка може да елиминира необходимостта от компоненти, базирани на клас.

Например, приложението ви извлича някои данни при монтиране. Това, което искате да направите, е да управлявате данните в основния компонент и да предавате сложната задача за изобразяване на подкомпонент като реквизит.

импортиране на RenderTable от ‘./RenderTable’;

клас Таблица разширява Компонент {
state = {loading: true};

render () {
const {зареждане, tableData} = this.state;
връщане зареждане? :;
}

компонентDidMount () {
fetchTableData (). тогава (tableData => {
this.setState ({loading: false, tableData});
});
}
}

�� 10. Кодът трябва да се изпълнява според очакванията и да бъде тест

Наистина това правило няма нужда от обяснение. Кодът, който пишете, трябва да се държи според очакванията и да бъде тестван лесно и бързо. Добра практика е тестовите файлове да се идентифицират идентично с изходните файлове с наставка .test. След това ще бъде лесно да намерите тестовите файлове.

Можете да използвате JEST за тестване на вашия React код.

�� 11. Всички файлове, свързани с всеки един компонент, трябва да бъдат в една папка

Съхранявайте всички файлове, свързани с всеки един компонент, в една папка, включително стилизиращи файлове.

Ако има някакъв малък компонент, използван само от конкретен компонент, има смисъл тези по-малки компоненти да се съхраняват заедно в тази папка. След това йерархията ще бъде лесна за разбиране – големите компоненти имат собствена папка и всичките им по-малки части са разделени на подпапки. По този начин можете лесно да извлечете код във всеки друг проект или дори да промените кода, когато пожелаете.

Например, за компонента Form всички части като CSS файлове, икони, изображения, тестове и всякакви други подкомпоненти, свързани с Form, трябва да пребивават в една и съща папка. Ако наименувате файлове разумно и поддържате свързани файлове логично заедно, няма да имате никакви затруднения да ги намерите по-късно.

�� 12. Използвайте инструменти като Bit

Една от най-добрите практики на React, която помага да се организират всичките ви компоненти на React, е използването на инструменти като малко.

Тези инструменти помагат да се поддържа и използва повторно код. Освен това, той помага кода да стане откриваем и насърчава екипното сътрудничество при изграждането на компоненти. Също така кодът може да се синхронизира между проекти.

�� 13. Използвайте фрагменти от библиотеки

Кодовите фрагменти ви помагат да сте в крак с най-добрия и най-скорошен синтаксис. Те също така помагат да запазите кода си сравнително без бъг, така че това е една от най-добрите практики на React, които не трябва да пропускате.

Има много библиотеки с фрагменти, които можете да използвате като ES7 React, Redux, JS Snippets и т.н..

✍️ 14. Напишете тестове за целия код

На всеки език на програмиране адекватното тестване гарантира, че всеки нов код, добавен към вашия проект, се интегрира добре със съществуващия код и не нарушава съществуващата функционалност. Добре е да напишете тестове за всеки нов компонент, който създавате. Като добра практика трябва да създадете директория __Test__ в директорията на вашия компонент, за да съхранявате всички подходящи тестове.

Можете широко да разделите тестовете в React на две части: тестване на функционалността на компонентите с помощта на приложение React и тестове на вашето цялостно приложение, след като се показва в браузъра. Можете да използвате кръстосани инструменти за тестване на браузъри за тестове в последната категория.

За първите можете да използвате тестов бегач на JavaScript, Jest да подражавате на HTML DOM с помощта на jsdom за тестване на React компоненти. Въпреки че напълно точен тест е възможен само в браузър на реално устройство, Jest осигурява добро сближаване на реалната среда за тестване по време на фазата на разработване на вашия проект.

�� 15. Следвайте правилата за свързване, разбивайте линии, които са твърде дълги

Линирането е процес, при който ние стартираме програма, която анализира код за потенциални грешки.

Най-вече го използваме за проблеми, свързани с езика. Но също така може да коригира много други проблеми автоматично, по-специално стила на кода. Използването на линтер във вашия React код помага да запазите кода си сравнително без грешки и грешки.

Заключителни думи за най-добрите практики на React

Надявам се този списък на най-добрите практики на React да ви помогне да поставите вашите проекти на правилния път и да избегнете евентуални проблеми по-късно по пътя.

Ако имате въпроси, свързани с Реакта, не се колебайте да ги изпратите в коментарите по-долу.

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Примери за кодове от Андрей Баикуș. Актуализации на съдържанието от Shaumik Daityari

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map