Реацт је један од најпопуларнијих фронт-енд оквира за ЈаваСцрипт. За разлику од других оквира као што је Ангулар, он је веома без мишљења. Стога, на вама је да одлучите како желите да напишете или структурирате свој Реацт код.

Овај чланак истражује неке праксе које треба да следите да бисте побољшали перформансе ваше Реацт апликације.

1. Коришћење функционалних компоненти и кукица уместо класа

У Реацт-у можете користите класне или функционалне компоненте са кукама. Требало би, међутим, да чешће користите функционалне компоненте и куке јер оне резултирају сажетијим и читљивијим кодом у поређењу са класама.

Размотрите следећу компоненту класе која приказује податке из НАСА АПИ-ја.

класа НасаДата проширује Реацт. Саставни део {
 конструктор (реквизити) {
 супер (реквизити);
 тхис.стате = {
 подаци: [],
 };
 }
 цомпонентДидМоунт() {
 дохвати(" https://api.nasa.gov/planetary/apod? апи_кеи=ДЕМО_КЕИ")
 .тхен((рес) => рес.јсон())
 .тхен((јсон) => {
 тхис.сетСтате({
 подаци: јсон,
 });
 });
 }
 дати, пружити() {
 цонст { дата } = тхис.стате;

instagram viewer


 ако (!дата.ленгтх)
 повратак (


 Преузимање података... 
{" "}



 );
 повратак (
 <>
 Преузмите податке помоћу компоненте класе 
{" "}
 {дата.мап((итем) => (
{итем.титле}

 ))}
 );
 }
}

Иста компонента се може написати помоћу кукица.

цонст НасаДата = () => {
 цонст [подаци, сетдата] = усеСтате (нулл);
 усеЕффецт(() => {
 дохвати(" https://api.nasa.gov/planetary/apod? апи_кеи=ДЕМО_КЕИ")
 .тхен((рес) => рес.јсон())
 .тхен((јсон) => {
 сетдата (јсон);
 });
 }, [подаци]);
 повратак (
 <>
 Преузмите податке помоћу компоненте класе 
{" "}
 {дата.мап((итем) => (
{итем.титле}

 ))}
 );
};

Иако горњи блок кода ради исту ствар као компонента класе, мање је сложен, минималан и лак за разумевање што доприноси бољем искуству програмера.

2. Избегавајте коришћење стања (ако је могуће)

Реацт стање прати податке који, када се промене, покрећу Реацт компоненту да се поново рендерује. Када правите Реацт апликације, избегавајте коришћење стања колико год је то могуће јер што више стања користите, више података морате да пратите у својој апликацији.

Један од начина да се минимизира употреба државе је да се она прогласи само када је то неопходно. На пример, ако преузимате корисничке податке из АПИ-ја, сачувајте цео кориснички објекат у стању уместо да чувате појединачна својства.

Уместо да урадите ово:

цонст [корисничко име, сетусернаме] = усеСтате('')
цонст [пассворд, сетпассворд] = усеСтате('')

Урадите:

цонст [усер, сетусер] = усеСтате({})

Приликом одлучивања о структури пројекта, идите на компоненту усредсређену. То значи да имате све датотеке које се тичу једне компоненте у једној фасцикли.

Ако сте креирали а Навбар компоненту, креирајте фасциклу под називом навбар који садржи Навбар сама компонента, стилска листа и друге ЈаваСрипт и датотеке средстава које се користе у компоненти.

Једна фасцикла која садржи све датотеке компоненте олакшава поновну употребу, дељење и отклањање грешака. Ако желите да видите како компонента функционише, потребно је да отворите само једну фасциклу.

4. Избегавајте коришћење индекса као кључних реквизита

Реацт користи кључеве за јединствену идентификацију ставки у низу. Помоћу тастера Реацт може прецизно одредити која је ставка промењена, додата или уклоњена из низа.

Већину времена када приказујете низове, можете користити индекс као кључ.

цонст Ставке = () => {
 цонст арр = ["итем1", "итем2", "итем3", "итем4", "итем5"];
 повратак (
 <>
 {арр.мап((елем, индекс) => {
{елем}
;
 })}
 );
};

Иако ово понекад функционише, коришћење индекса као кључа може довести до проблема, посебно ако се очекује да ће се листа променити. Размотрите ову листу.

цонст арр = ["итем1", "итем2", "итем3", "итем4", "итем5"];

Тренутно, прва ставка листе, „Итем1” је на индексу нула, али ако сте додали још једну ставку на почетак листе, „Итем1” индекс би се променио на 1 што мења понашање вашег низа.

Решење је коришћење јединствене вредности као индекса како би се осигурало да се одржава идентитет ставке листе.

5. Одлучите се за фрагменте уместо дивова где је то могуће

Реацт компоненте треба да врате код умотан у једну ознаку обично а или Реацт фрагмент. Требало би да се одлучите за фрагменте где је то могуће.

Користећи повећава величину ДОМ-а, посебно у великим пројектима, јер што више ознака или ДОМ чворова имате, то је више меморије потребно вашој веб локацији и више снаге користи претраживач да учита вашу веб локацију. Ово доводи до мање брзине странице и потенцијално лошег корисничког искуства.

Један пример елиминисања непотребног ознаке их не користи када враћа један елемент.

цонст дугме = () => {
 повратак Приказ;
};

6. Пратите конвенције о именовању

Увек треба да користите ПасцалЦасе када именујете компоненте да бисте их разликовали од других не-компонентних ЈСКС датотека. На пример: Текстуално поље, НавМену, и СуццессБуттон.

Користите цамелЦасе за функције декларисане унутар Реацт компоненти као што су хандлеИнпут() или сховЕлемент().

7. Избегавајте понављање кода

Ако приметите да пишете дуплирани код, претворите га у компоненте које се могу поново користити.

На пример, има смисла креирати компоненту за ваш навигациони мени уместо да узастопно пишете код у сваку компоненту која захтева мени.

То је предност архитектуре засноване на компонентама. Можете да разбијете свој пројекат на мале компоненте које можете поново користити у својој апликацији.

8. Користите деструктурирање објеката за реквизите

Уместо прослеђивања објекта пропс, користите деструктурирање објекта да бисте проследили име пропс-а. Ово одбацује потребу да се позивате на објекат пропс сваки пут када треба да га користите.

На пример, следећа је компонента која користи реквизите онако како јесте.

цонст дугме = (реквизити) => {
 повратак {пропс.тект};
};

Са деструктурирањем објеката, директно се позивате на текст.

Цонст Дугме = ({тект}) => {
 повратак {тект};
};

9. Динамички приказати низове користећи мапу

Користите Мапа() за динамичко приказивање поновљених ХТМЛ блокова. На пример, можете користити Мапа() да прикажете листу ставки у ознаке.

цонст Ставке = () => {
 цонст арр = ["итем1", "итем2", "итем3", "итем4", "итем5"];
 повратак (
 <>
 {арр.мап((елем, индекс) => {
{елем}
;
 })}
 );
 };

Ради поређења, ево како можете приказати листу без Мапа(). Овај приступ се веома понавља.

цонст Листа = () => {
 повратак (


Итем1

Итем2

Итем3

Итем4

Итем5




 );
};

10. Напишите тестове за сваку Реацт компоненту

Напишите тестове за компоненте које креирате јер то смањује могућност грешака. Тестирање осигурава да се компоненте понашају онако како бисте очекивали. Један од најчешћих оквира за тестирање за Реацт је Јест, и он пружа окружење у којем можете извршити своје тестове.

Иако је Реацт донекле флексибилан у погледу начина на који га можете користити, праћење специфичних пракси ће вам помоћи да извучете максимум из свог искуства.

Када следите ове савете, имајте на уму свој одређени пројекат и циљеве; неки ће бити релевантнији у одређеним случајевима од других.

Како користити АПИ-је у реаговању користећи Фетцх и Акиос

Желите да знате како да користите АПИ-је? Разумевање како да се користе АПИ-ји у Реацт-у је кључни елемент употребе АПИ-ја.

Реад Нект

О аутору