React — один из самых популярных интерфейсных фреймворков для JavaScript. В отличие от других фреймворков, таких как Angular, он очень беспристрастен. Поэтому вам решать, как вы хотите написать или структурировать свой код React.

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

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

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

Рассмотрим следующий компонент класса, который отображает данные из NASA API.

класс NasaData расширяет React. Компонент {
 конструктор (реквизит) {
 супер (реквизит);
 это.состояние = {
 данные: [],
 };
 }
 компонентDidMount () {
 принести(" https://api.nasa.gov/planetary/apod? API_key = DEMO_KEY")
 .затем((рез) => res.json())
 .тог((json) => {
 это.setState({





instagram viewer


 данные: json,
 });
 });
 }
 оказывать() {
 const {данные} = this.state;
 если (!данные.длина)
 вернуть (


 Получение данных... 
{" "}



 );
 вернуть (
 <>
 Получить данные с помощью компонента класса 
{" "}
 {data.map((элемент) => (
{элемент.название}

 ))}
 );
 }
}

Этот же компонент можно написать с помощью хуков.

const NasaData = () => {
 const [данные, набор данных] = useState (ноль);
 использоватьЭффект(() => {
 принести(" https://api.nasa.gov/planetary/apod? API_key = DEMO_KEY")
 .затем((рез) => res.json())
 .тог((json) => {
 установить данные (json);
 });
 }, [данные]);
 вернуть (
 <>
 Получить данные с помощью компонента класса 
{" "}
 {data.map((элемент) => (
{элемент.название}

 ))}
 );
};

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

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

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

Один из способов свести к минимуму использование состояния — объявлять его только при необходимости. Например, если вы извлекаете пользовательские данные из API, сохраняйте в состоянии весь пользовательский объект, а не отдельные свойства.

Вместо этого:

const [имя пользователя, setusername] = useState ('')
const [пароль, setpassword] = useState('')

Сделай это:

const [пользователь, setuser] = useState({})

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

Если бы вы создавали Навбар компонент, создайте папку с именем панель навигации содержащий Навбар сам компонент, таблицу стилей и другие файлы JavaSript и ресурсы, используемые в компоненте.

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

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

React использует ключи для уникальной идентификации элементов в массиве. С помощью ключей React может определить, какой элемент был изменен, добавлен или удален из массива.

Большую часть времени при рендеринге массивов вы можете использовать индекс в качестве ключа.

константные элементы = () => {
 const arr = ["элемент1", "элемент2", "элемент3", "элемент4", "элемент5"];
 вернуть (
 <>
 {arr.map((элемент, индекс) => {
{элемент}
;
 })}
 );
};

Хотя это иногда работает, использование индекса в качестве ключа может вызвать проблемы, особенно если ожидается, что список изменится. Рассмотрим этот список.

const arr = ["элемент1", "элемент2", "элемент3", "элемент4", "элемент5"];

В настоящее время первый пункт списка «Товар1” имеет нулевой индекс, но если вы добавили еще один элемент в начало списка, то “Товар1” index изменится на 1, что изменит поведение вашего массива.

Решение состоит в том, чтобы использовать уникальное значение в качестве индекса, чтобы гарантировать сохранение идентичности элемента списка.

5. Выбирайте фрагменты вместо Div, где это возможно

Компоненты React должны возвращать код, завернутый в один тег, обычно или фрагмент React. Вы должны выбрать фрагменты, где это возможно.

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

Один из примеров избавления от ненужного теги не используют их при возврате одного элемента.

константная кнопка = () => {
 вернуть Отображать;
};

6. Следуйте соглашениям об именах

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

Используйте camelCase для функций, объявленных внутри компонентов React, таких как обработать ввод () или показатьЭлемент().

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

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

Например, имеет смысл создать компонент для меню навигации, а не постоянно писать код для каждого компонента, которому требуется меню.

В этом преимущество компонентной архитектуры. Вы можете разбить свой проект на небольшие компоненты, которые вы можете повторно использовать в своем приложении.

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

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

Например, ниже показан компонент, который использует props как есть.

const Button = (реквизит) => {
 вернуть {реквизит.текст};
};

При деструктуризации объекта вы обращаетесь непосредственно к тексту.

константная кнопка = ({текст}) => {
 вернуть {текст};
};

9. Динамически отображать массивы с помощью карты

Использовать карта() для динамического отображения повторяющихся блоков HTML. Например, вы можете использовать карта() отображать список элементов в теги.

константные элементы = () => {
 const arr = ["элемент1", "элемент2", "элемент3", "элемент4", "элемент5"];
 вернуть (
 <>
 {arr.map((элемент, индекс) => {
{элемент}
;
 })}
 );
 };

Для сравнения, вот как вы можете отобразить список без карта(). Этот подход очень повторяющийся.

константный список = () => {
 вернуть (


Товар1

Пункт2

Пункт 3

Пункт4

Пункт5




 );
};

10. Напишите тесты для каждого компонента React

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

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

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

Как использовать API в React с помощью Fetch и Axios

Хотите знать, как использовать API? Понимание того, как использовать API в React, является ключевым элементом использования API.

Читать далее

Об авторе