Привет! Добро пожаловать в мою ежедневную статью! Сегодня я расскажу о некоторых советах по написанию чистого React-кода.
Разумеется, как всегда, у людей будут свои мнения, и вам они могут не понравиться. Черт возьми, возможно, я даже изменю свое мнение через несколько месяцев! Кто знает. Эти советы полезны сегодня, и я хотел поделиться ими с вами.
💡 Совет 1: Используйте функциональные компоненты вместо компонентов класса
Как я уже говорил в другой статье, функциональные компоненты являются текущим стандартом в React, поэтому почти все используют их. Но если вы следуете какому-то старому руководству или сомневаетесь, какой из них использовать… используйте функциональные компоненты.
Они являются более простым и лаконичным способом определения компонентов!
Кроме того, они быстрее и проще для понимания, особенно для начинающего разработчика.
Здесь у вас есть базовый компонент React, закодированный как компонент класса:
А здесь тот же компонент, но в виде функционального компонента:
💡 Совет 2: Используйте хук useState для управления состоянием
Ну, это глупо, если вы уже используете функциональные компоненты, но на всякий случай, да, используйте хук useState для управления состоянием.
Вот пример:
В этом примере я использую хук useState для хранения текущего счета (переменная count), и у меня также есть функция (setCount) для обновления счета.
Таким образом, это позволяет мне управлять состоянием в моих компонентах без использования компонентов классов или сложных библиотек управления состоянием.
Если вы хотите прочитать об этом больше, ознакомьтесь с этим документом!
💡 Совет 3: Используйте хук useEffect для побочных эффектов
Еще один довольно очевидный совет, если вы уже используете функциональные компоненты, но… всегда полезно помнить.
Этот хук - мощный инструмент для обработки побочных эффектов в компонентах React. По сути, он позволяет вам выполнять действия после обновления компонента, например, делать вызовы API или обновлять DOM.
Как всегда, перед вами пример использования хука:
В предыдущем коде я использовал хук useEffect для получения данных из API при установке компонента. Второй аргумент хука - массив зависимостей, который определяет, когда эффект должен быть запущен повторно.
В данном случае пустой массив означает, что эффект будет запущен только один раз при монтировании компонента.
💡 Совет 4: Используйте деструктуризацию для упрощения кода
Одна из самых мощных функций в последних версиях Javascript, это не только особенность React; вы можете использовать ее везде в Javascript. И вы должны это делать!
Она позволяет извлекать значения из объектов и массивов. Например, вы можете использовать ее в React, чтобы упростить ваш код и сделать его более легким для чтения.
Конечно же, я поделюсь примером реструктуризации в функциональном компоненте:
В этом примере реквизит message деструктурируется из объекта props, делая его доступным как отдельную переменную.
Как видите, это позволяет упростить код (не нужно писать везде что-то вроде props.message) и, таким образом, сделать его более легким для чтения.
💡 Совет 5: Используйте мемоизацию для повышения производительности
Я знаю, что постоянно говорю об этом в последних статьях, но… Я действительно люблю это, и когда это сделано правильно, это значительно улучшает производительность веб-приложения.
Поэтому я должен был включить его сюда снова.
Мемоизация - это техника оптимизации производительности компонентов React, позволяющая избежать ненужных повторных рендеров. Вы можете использовать компонент высшего порядка React.memo или хук useMemo для запоминания компонентов.
И да, вот пример:
В этом примере компонент высшего порядка React.memo оборачивает компонент и запоминает его, поэтому он вернет кэшированный компонент, если значение параметра message не изменится.
Конечно, это не тяжелый компонент, поэтому такая оптимизация не даст реальных улучшений, но… это был простой способ продемонстрировать его.
Если вы хотите прочитать больше о том, как правильно это делать, я очень рекомендую посмотреть вот это.
💡 Совет 6: Используйте ключевой реквизит для повышения производительности
Возможно, вы видели предупреждение в консоли разработчика, связанное с этим, так что… это полезно знать.
Ключевой реквизит - это специальный реквизит в React, который позволяет оптимизировать рендеринг массива компонентов.
Указывая уникальный ключ для каждого компонента в массиве, React может отслеживать, какие компоненты изменились, и обновлять только те, которые должны быть обновлены, улучшая производительность.
Меньше разговоров и больше примеров!
В этом примере мы отображаем каждый элемент внутри массива как элемент li. И мы устанавливаем ключевой параметр для каждого из них на основе id, который мы получили от их объектов.
Обычно, если вы сделаете это без ключевого реквизита, вы увидите предупреждение в консоли разработчика с предложением добавить ключевой реквизит. Так что, вероятно, вы уже видели это.
Это основы этого реквизита, но если у вас есть немного свободного времени, я рекомендую ознакомиться с его документацией здесь.
💡 Совет 7: Используйте встроенные стили экономно
Некоторые люди согласятся с этим советом, другие возненавидят меня. Но это нормально; я считаю, что он важен для чистоты кодовой базы.
Встроенные стили могут быть полезны в определенных ситуациях, но также могут привести к головной боли при обслуживании и низкой производительности. Как правило, лучше использовать таблицы стилей CSS (или даже наборы UI, Tailwind, ну вы понимаете…) для стилизации компонентов и поддержания организованности и удобочитаемости кода.
Конечно, вы можете быстро создать прототип, используя встроенные стили, но перед запуском в производство переведите код на что-то лучшее (например, CSS-модули)!
Как я уже сказал, это спорный совет.
Как и в каждой статье, в этой должен быть вывод. А вывод таков: написание чистого и эффективного кода React имеет решающее значение для успеха вашего приложения (и для психического здоровья ваших коллег-разработчиков). Но не только это, это сделает вашу жизнь проще, как только вы привыкнете к этой практике.
И как всегда, эти советы не являются абсолютной истиной, и вы можете с ними не согласиться. Важно знать их и иметь собственное мнение о них. Надеюсь, это дало вам материал для размышлений, и всегда спасибо, что читаете!
🌎 Давайте общаться!