React е една от най-популярните предни рамки за JavaScript. За разлика от други рамки като Angular, той е много необоснован. Следователно от вас зависи да решите как искате да напишете или структурирате вашия React код.

Тази статия разглежда някои практики, които трябва да следвате, за да подобрите производителността на вашето приложение React.

1. Използване на функционални компоненти и куки вместо класове

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

Помислете за следния компонент на класа, който показва данни от API на NASA.

клас NasaData разширява React. Съставна част {
 конструктор (реквизит) {
 супер (реквизит);
 this.state = {
 данни: [],
 };
 }
 componentDidMount() {
 извличане (" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 данни: json,
 });
 });
 }
 render() {
 const { data } = това.състояние;





instagram viewer


 ако (!data.length)
 връщане (


 Данните се извличат... 
{" "}



 );
 връщане (
 <>
 Извличане на данни с помощта на компонент Class 
{" "}
 {data.map((елемент) => (
{item.title}

 ))}
 );
 }
}

Същият компонент може да бъде написан с помощта на куки.

const NasaData = () => {
 const [data, setdata] = useState (null);
 useEffect(() => {
 извличане (" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [данни]);
 връщане (
 <>
 Извличане на данни с помощта на компонент Class 
{" "}
 {data.map((елемент) => (
{item.title}

 ))}
 );
};

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

2. Избягвайте използването на състояние (ако е възможно)

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

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

Вместо да правите това:

const [потребителско име, setusername] = useState('')
const [парола, setpassword] = useState('')

Направите това:

const [user, setuser] = useState({})

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

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

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

4. Избягвайте използването на индекси като ключови опори

React използва ключове за уникално идентифициране на елементи в масив. С клавишите React може да определи кой елемент е променен, добавен или премахнат от масива.

През повечето време, когато изобразявате масиви, може да използвате индекса като ключ.

const Елементи = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 връщане (
 <>
 {arr.map((elem, index) => {
{елем}
;
 })}
 );
};

Въпреки че това понякога работи, използването на индекса като ключ може да доведе до проблеми, особено ако се очаква списъкът да се промени. Помислете за този списък.

const arr = ["item1", "item2", "item3", "item4", "item5"];

В момента първият елемент от списъка „Елемент1” е с нулев индекс, но ако сте добавили друг елемент в началото на списъка, „Елемент1” индексът ще се промени на 1, което променя поведението на вашия масив.

Решението е да се използва уникална стойност като индекс, за да се гарантира, че идентичността на елемента от списъка се поддържа.

5. Изберете фрагменти вместо раздели, където е възможно

Компонентите на React трябва да върнат код, опакован в един таг, обикновено a или React фрагмент. Трябва да изберете фрагменти, където е възможно.

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

Един пример за премахване на ненужното тагове не ги използва, когато връща един елемент.

const бутон = () => {
 връщане Дисплей;
};

6. Следвайте конвенциите за именуване

Винаги трябва да използвате PascalCase, когато наименувате компоненти, за да ги разграничите от други некомпонентни JSX файлове. Например: Текстово поле, NavMenu, и Бутон за успех.

Използвайте camelCase за функции, декларирани в компонентите на React като handleInput() или showElement().

7. Избягвайте повтарящ се код

Ако забележите, че пишете дублиран код, преобразувайте го в компоненти, които могат да се използват повторно.

Например, по-разумно е да създадете компонент за вашето навигационно меню, вместо да пишете многократно кода във всеки компонент, който изисква меню.

Това е предимството на компонентно-базирана архитектура. Можете да разбиете проекта си на малки компоненти, които можете да използвате повторно във вашето приложение.

8. Използвайте деструктуриране на обекти за реквизити

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

Например, по-долу е компонент, който използва реквизит както е.

const бутон = (реквизит) => {
 връщане {props.text};
};

С деструктурирането на обекта се отнасяте директно към текста.

const бутон = ({text}) => {
 връщане {текст};
};

9. Динамично изобразяване на масиви с помощта на карта

Използвайте карта () за динамично изобразяване на повтарящи се HTML блокове. Например, можете да използвате карта () за изобразяване на списък с елементи в етикети.

const Елементи = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 връщане (
 <>
 {arr.map((elem, index) => {
{елем}
;
 })}
 );
 };

За сравнение, ето как можете да изобразите списъка без карта (). Този подход е много повтарящ се.

const списък = () => {
 връщане (


Елемент1

артикул 2

Елемент3

Артикул 4

артикул 5




 );
};

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

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

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

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

Как да консумирате API в React, използвайки Fetch и Axios

Искате ли да знаете как да използвате API? Разбирането как да се използват API в React е ключов елемент от използването на API.

Прочетете Следващото

За автора