React
Kanalga Telegram’da o‘tish
Подборки по React js и все что с ним связано. По всем вопросам @evgenycarter
Ko'proq ko'rsatish
Tarmoq:2 647
Obunachilar
-124 soatlar
-77 kun
-1330 kun
Postlar arxiv
\nwindow.__STATE__ = JSON.parse(window.myState.innerHTML)\n\n// \"Just parse\":\nwindow.__STATE__ = JSON.parse(\"{\\\"foo\\\":\\\"bar\\\"}\")\n\nhttps://calendar.perfplanet.com/2023/fastest-way-passing-state-javascript-revisited/\n\n#react\n\n✍️ @React_lib","datePublished":"2024-07-29T07:11:42Z","dateModified":"2024-07-29T07:11:42Z","author":{"@type":"Organization","name":"React","url":"https://telemetr.io/uz/channels/1689019175-react_lib","image":"https://img.telemetr.io/c/1QiX2L/5276438899222232427?ty=x"},"publisher":{"@type":"Organization","name":"React","url":"https://telemetr.io/uz/channels/1689019175-react_lib","image":"https://img.telemetr.io/c/1QiX2L/5276438899222232427?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1093},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}}]}
2 647
❌ Избегайте отслеживания изменений ref с помощью
useEffect() в React.
✅ Вместо этого используйте функцию обратного вызова ref.
#react
✍️ @React_lib2 647
⚛️ Одной из самых сложных вещей для меня при изучении React была разделение ответственности.
Когда стоит вынести JSX в новые компоненты? Когда создавать кастомные хуки?
Как можно абстрагировать слой данных от представления?
Вот короткое видео о том, как это сделать
#react
✍️ @React_lib
2 647
⚛️ Совет по React: Если вам нужно импортировать серверный компонент в клиентском компоненте, передайте его как prop (children) ↓
#react
✍️ @React_lib
2 647
⚛️ Совет по React: Используйте кастомный хук для управления состояниями массивов в ваших компонентах.
#react
✍️ @React_lib
2 647
‼️Тест по React JS от OTUS
— Ответьте на 30 вопросов и проверьте, насколько хорошо вы знаете язык.
Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js по спец. цене!
👉ПРОЙТИ ТЕСТ - https://vk.cc/czLjo4
Курс доступен в рассрочку.
❇️ Пройдите тест и получите:
✔️ Живое общение с экспертами
✔️Получите видео-курс по Git в подарок
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+
✔️ Скидку на прохождение онлайн курса «React.js Developer»
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
2 647
⚛️ Знаете ли вы, как и когда использовать flushSync в React?
Используйте
flushSync, чтобы принудительно выполнить немедленный рендеринг обновлений, обходя обычную пакетную отрисовку.
Полезно при интеграции с сторонним кодом, таким как браузерные API или UI-библиотеки.
#react
✍️ @React_lib
2 647
⚛️ Знали ли вы, что можно использовать пересечение типов для легкого расширения нативных свойств элементов в React
#react
✍️ @React_lib
2 647
❓Хотите узнать, как эффективно управлять состоянием в React.js с помощью хуков useState и useReducer?
Ждем вас на открытом вебинаре 20 августа в 19:00 мск, где мы разберём:
- основы управления состоянием в React.js с помощью хуков useState и useReducer;
- различия и преимущества использования useState и useReducer;
- практические примеры применения хуков для управления состоянием в реальных приложениях.
Урок будет полезен как новичкам, знакомым с базовыми концепциями React, так и опытным разработчикам, которые хотят улучшить свои навыки управления состоянием.
Встречаемся в преддверии старта курса «React.js Developer». Все участники вебинара получат специальную цену на обучение!
👉 Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/czugnB
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
2 647
Полиморфизм в React: 2 паттерна, которые нужно знать
Независимо от того, создаете ли вы библиотеку или разрабатываете React-компоненты для своих нужд, есть один прием, который вам необходимо знать: полиморфизм. Это когда один элемент может принимать несколько форм, например, когда кнопка может выступать в роли ссылки. При правильном использовании это может избавить вас от необходимости поддерживать множество вариантов компонентов, одновременно предоставляя пользователям необходимую гибкость.
В этом тексте я покажу вам, как использовать два наиболее известных способа реализации полиморфизма в React: паттерны "as" и "asChild".
https://www.bekk.christmas/post/2023/1/polymorphism-in-react
#react
✍️ @React_lib
2 647
Дублирование JSX - верный признак того, что вам нужно создать компонент.
Дублирование логики в компонентах - верный признак того, что вам, возможно, нужно создать пользовательский хук.
Обратите внимание на слово *может*
#react
✍️ @React_lib
2 647
⚛️ useEffect становится проще в React, когда вы перестаете использовать его для:
1. Выведения/вычисления нового состояния.
2. Инициализации состояния на основе props.
3. Получения данных.
Вместо этого:
1. Делайте это в рендере.
2. Инициализируйте состояние в useState.
3. Используйте либо обработчики событий, либо react-query для этого.
#react
✍️ @React_lib
2 647
⚛️ Быстрый совет по React
❌ Преобразование данных в useEffect.
✅ Делаем это во время рендеринга ↓
#react
✍️ @React_lib
2 647
❓React-компоненты работают медленно и требуют оптимизации? Хотите узнать, как сделать их быстрыми и эффективными?
Ждем вас на открытом вебинаре «Оптимизация работы компонентов в React.js» 6 августа в 19:00 мск, где мы разберём:
- как работать с оптимизацией в React.js;
- особенности работы функциональных компонентов и хуков;
- трюк с мемоизацией коллбеков для списка элементов.
Урок будет полезен как начинающим разработчикам React, так и опытным специалистам, которые хотят глубже изучить процесс мемоизации.
Встречаемся в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение!
👉 Регистрация открыта: https://otus.pw/AXnVY/?erid=2VtzqwfLhcF
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
2 647
Самый быстрый способ передачи state в JavaScript
В приложениях Redux с серверным рендерингом часто приходится передавать state магазина с сервера на клиент. Передача больших state может быть медленной, поэтому в 2019 году Хенрик Йоретаг провел бенчмаркинг трех подходов, чтобы определить наиболее производительный способ:
// "Plain object":
window.__STATE__ = {"foo":"bar"}
// "Invalid mime type":
<script type="mime/invalid" id="myState">{"foo":"bar"}</script>
window.__STATE__ = JSON.parse(window.myState.innerHTML)
// "Just parse":
window.__STATE__ = JSON.parse("{\"foo\":\"bar\"}")