Оптимизация разработки на React.js: Советы и рекомендации экспертов - UPROGER

Я столкнулся с многочисленными проблемами, когда начал изучать React и работать с ним, поэтому я нашёл и внедрил некоторые методы, которые повысили мою эффективность. Кроме того, в моей работе были проблемы, с которыми я не смог справиться в то время, но теперь я планирую решить их в ближайшем будущем. Это руководство представляет собой сборник советов, которые я хотел бы получить, когда сам начинал работать с React.

@react_tg – лучшие материалы для React разработчиков в нашем канале.

Основные проблемы

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

Отсутствие чёткого представления о React

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

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

Возникающие проблемы

Возможность многократного использования и удобство обслуживания кода – тесно связанные понятия. Когда приложение и его компоненты небольшие и простые, их легко поддерживать.

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

Основными причинами проблем часто являются недостаток опыта или временные ограничения. Другим ключевым фактором, который может способствовать возникновению проблем, является недостаточное тестирование или вовсе его отсутствие. Тестирование не всегда является самой главной задачей, но в долгосрочной перспективе оно действительно может окупиться.

Рекомендации, которых необходимо придерживаться в ReactJS

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

Рекомендуется чаще использовать функциональные компоненты и хуки в React, поскольку они приводят к более сжатому и читабельному коду по сравнению с классами. Приведенный ниже код демонстрирует компонент класса, который извлекает данные из API NASA:

class NasaData extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     data: [],
   };
 }
 componentDidMount() {
   fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
     .then((res) => res.json())
     .then((json) => {
       this.setState({
         data: json,
       });
     });
 }
 render() {
   const { data } = this.state;
   if (!data.length)
     return (
       <div>
         <h1> Fetching data.... </h1>{" "}
       </div>
     );
   return (
     <>
       <h1> Fetch data using Class component </h1>{" "}
       {data.map((item) => (
         <div key={item.id}>{item.title}</div>
       ))}
     </>
   );
 }
}

Точно такую же программу можно было написать с помощью функциональных компонентов и хуков:

const NasaData = () => {
 const [data, setdata] = useState(null);
 useEffect(() => {
   fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
     .then((res) => res.json())
     .then((json) => {
       setdata(json);
     });
 }, [data]);
 return (
   <>
     <h1> Fetch data using Class component </h1>

Правильно организуйте размещение всех файлов

При организации вашего проекта, рекомендуется использовать компонентно-ориентированное программирование, котороя предполагает размещение всех файлов, относящихся к одному компоненту, в одной папке. Например, предположим, что вы создаёте компонент панели навигации. В этом случае вы могли бы создать папку “navbar”, содержащую сам компонент Navbar, соответствующую таблицу стилей и любые другие файлы JavaScript и ресурсов, используемые компонентом.

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

Помните о Соглашении об именах

При работе с React важно соблюдать Соглашения об именах. В частности, вы должны использовать PascalCase при присвоении имён компонентам, чтобы отличать их от других файлов JSX. Например, TextField, NavMenu и SuccessButton.camelCase рекомендуется для объявления функций в компонентах React, таких как handleInput() или showElement().

Минимизируйте использование состояний (если это возможно)

Состояния React используется для отслеживания данных, которые вызывают повторный рендеринг компонента при его изменении. Чтобы упростить управление данными в приложении, лучше всего свести к минимуму использование этого функционала. Один из способов сделать это – объявлять состояние только тогда, когда это действительно необходимо, а не сохранять отдельные свойства. Например, если вы извлекаете пользовательские данные из API, рассмотрите возможность сохранения всего пользовательского объекта в состоянии, а не отдельных свойств, таких как имя пользователя и пароль.

Вместо того, чтобы делать это:

const [username, setusername] = useState(' ')
const [password, setpassword] = useState(' ')

Делайте это:

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

Не используйте индексы в качестве ключей (если это возможно)

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

const Items = () => {
const arr = ["item1", "item2", "item3", "item4", "item5"];
return (
<>
{arr.map((elem, index) => {
<li key={index}>{elem}</li>;
})}
</>
);
};

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

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

Если вы добавите элемент в начало этого списка, индекс “item1” изменится с 0 на 1. Чтобы избежать эту проблему, лучше всего использовать уникальное значение в качестве ключа, а не индекса.

Старайтесь использовать фрагменты, а не div

В React компоненты должны быть заключены в один тег, такой как <div> или фрагмент React. Как правило, лучше всего использовать фрагменты, потому что использование тегов <div> может увеличить размер DOM, что приведёт к снижению скорости страницы и потенциально ухудшит пользовательское впечатление. Чтобы свести к минимуму использование тегов <div>, вы можете не использовать их при возврате отдельного элемента. Например:

const Button = () => {
return <button>Display</button>;
};

Пишите ваш код, используя принцип DRY

Принцип DRY всегда необходимо помнить, ведь он является ключевым. DRY подразумевает в себе исключения повторов в вашем коде. Один из способов добиться этого – искать повторения в вашем коде и устранять любое дублирование. Это ключевой принцип в React — если у вас есть несколько кнопок, содержащих значки, вы можете создать компонент Button и использовать его вместо написания разметки для каждой кнопки. Вы даже можете пойти дальше, объединив всё в массив. Другими словами, не изобретайте велосипед заново — используйте то, что у вас уже есть! Небольшое переписывание может помочь сделать ваш код максимально кратким.

Используйте деструктуризацию объектов

Деструктуризация объектов позволяет вам напрямую ссылаться на отдельные имена свойств, а не на всё свойство, что делает ваш код более кратким и лёгким для чтения. Используя деструктуризацию, вы можете постоянно оптимизировать свой код. Вот пример кода, который не стоит использовать:

const Button = (props) => {
return <button>{props.text}</button>;
};
You can use object destructuring like this:
const Button = ({text}) => {
return <button>{text}</button>;
};

Это избавляет от необходимости постоянно ссылаться на объекты свойств и может сделать ваш код более читаемым.

Протестируйте каждый компонент React

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

Соблюдайте правила линтера

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

Используйте такой инструмент, как Bit

Использование таких инструментов, как Bit, может быть эффективной практикой для организации компонентов React, а также для поддержки и повторного использования кода. Этот инструмент не только облегчают совместную работу команды при создании компонентов, но и делают код доступным для обнаружения и позволяют синхронизировать его в нескольких проектах. В целом, использование такого инструмента, как Bit, может значительно повысить эффективность и организацию процесса веб-разработки на React.

Используйте библиотеки фрагментов

Использование фрагментов кода – ценная практика для ReactJS, поскольку она помогает вам оставаться в курсе правильного синтаксиса и минимизировать вероятность ошибок в вашем коде. Существует множество доступных библиотек фрагментов, таких как ES7 React, Redux, JS Snippets и другие, которые вы можете использовать. Включение фрагментов кода в ваш рабочий процесс может сэкономить ваше время и гарантировать высокое качество вашего кода.

Подведение итогов

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