{"time":1744970103177,"blocks":[{"id":"8Y0a-fmJin","type":"paragraph","data":{"text":"В мире React термин «паттерн» означает какой-то проверенный подход к решению задачи, а не шаблон проектирования из классической книги. За годы разработки вокруг React сформировались свои распространённые паттерны — способы организовать компоненты и логику так, чтобы код получался понятным, поддерживаемым и переиспользуемым."}},{"id":"VekdOL_-vJ","type":"paragraph","data":{"text":"Меня зовут Юсуп Изрипов, я сеньор разработчик в VK. Работаю над продуктами, которыми ежедневно пользуются миллионы человек. "}},{"id":"68ASVHgnLi","type":"paragraph","data":{"text":"В этих статьях я расскажу вам о самых популярных паттернах и приведу примеры кода. Мы рассмотрим, когда каждый из них может пригодиться, а также отметим их плюсы и минусы. Поговорим о классических приёмах вроде контейнеров и HOC, эволюции к хукам, также обязательно рассмотрим новые паттерны появившиеся в последних версиях React."}},{"id":"ZI0RXbxARo","type":"header2","data":{"text":"Container + Presentational Components","level":2},"tunes":{}},{"id":"FmVfrSNixS","type":"paragraph","data":{"text":"На первом месте работы ещё во время разработки на Vue мы с подачи нашего тимлида решили ввести этот паттерн. Глобально у нас были так называемые «умные» и «тупые» компоненты (или как я тактично называл их на демо — визуальные). Как вы наверняка догадались, роль Container у нас исполняли «умные» компоненты, а роль Presentational — «тупые». В чём, собственно, суть этого паттерна? Слышали выражение «разделяй и властвуй»? Паттерн Container & Presentational Components (контейнерные и презентационные компоненты) ровно об этом: он разделяет логику (данные и взаимодействие с ними) и отображение (UI) на разные компоненты."}},{"id":"1a258f23-ebac-488f-9bef-67bc321118c7","type":"embed","data":{"data":{"id":254561,"name":"chto-takoe-cookies--localstorage-i-sessionstorage","type":"post","title":"Что такое cookies, localStorage и sessionStorage: главные отличия и примеры","author":96505,"parent":72711,"status":"publish","content":"

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

\r\n\r\n

Как это реализуется на практике? Есть несколько способов работы с информацией. Наиболее востребованные из них — это cookies, localStorage и sessionStorage. Эти инструменты отличаются друг от друга, но далеко не все разработчики могут объяснить разницу между ними.

\r\n\r\n

Узнаем, что собой представляют cookies, localStorage и sessionStorage, каковы их основные характеристики и особенности, как они применяются и какой способ работы с данными лучше.

\r\n\r\n

Cookies

\r\n\r\n

На заре интернета cookies были безальтернативным вариантом хранения данных на стороне клиента. Файлы куки представляют собой элементарные пары типа «ключ-значение» и используются для:

\r\n\r\n

управления текущими сессиями;
персонализации пользователя;
отслеживания его активности.

\r\n\r\n

При этом данные не просто остаются в хранилище в браузере, но и передаются на серверы в виде HTTP-заголовков, выступая частью спецификации протокола. Cookies поддерживают все браузеры — это универсальный способ работы с информацией. И хотя объем данных для хранения ограничен, производительность этого способа — крайне важный показатель для работы современных веб-ресурсов.

\r\n\r\n

По сути куки — это ограниченные по размеру текстовые файлы, которые сайт сохраняет на устройстве пользователя. Объем данных в «печеньках» лимитирован — это не больше 4 КБ, при этом у них есть срок хранения, который устанавливает разработчик ресурса.

\r\n\r\n

Например, в Google есть файлы аналитики для сбора информации, которые хранятся от 6 до 24 месяцев. Некоторые cookies действуют только в период работы в браузере и при закрытии автоматически уничтожаются, другие хранятся в течение всего перерыва между сессиями — их срок жизни зависит от выполняемых задач.

\r\n\r\n

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

\r\n\r\n

\n \n \n \n

\r\n\r\n

Развитие этого инструмента продолжается. Например, в экосистеме Chromium доступна версия, которая поддерживает общую память и асинхронный API CookieStore — им можно пользоваться без блокировки главного потока.

\r\n\r\n

Закрепим основные характеристики cookies:

\r\n\r\n

сохраняют данные, которые передаются на сервер с помощью заголовков;
локальные и сессионные куки-хранилища существуют только на стороне клиента;
сроки хранения устанавливаются заранее при создании куков;
объем ограничен (4 КБ);
бывают защищенные куки, но в этом случае их содержимое будет недоступным на клиентской стороне — такой формат используется для аутентификации пользователей при хранении их токенов.

\r\n\r\n

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

\r\n\r\n

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

\r\n\r\n

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

\r\n\r\n

\n    // Setting a cookie\ndocument.cookie = \"name=Mathew; expires=Thu, 1 Jan 2025 00:00:00 UTC; path=/\";\n\n// Retrieving a cookie\nconst cookies = document.cookie.split(\"; \");\ncookies.forEach(cookie => {\n  const [key, value] = cookie.split(\"=\");\n  console.log(key, value);\n});\n\n// Removing a cookie\ndocument.cookie = \"name=; expires=Thu, 2 Jan 1975 00:00:00 UTC; path=/\";\n\n

\r\n\r\n

В этом примере для установки cookie разработчик присваивает строку свойству document.cookie. Можно задать дополнительные свойства — например, срок действия, путь или домен.

\r\n\r\n

У файлов cookie довольно широкая область применения — хранение настроек юзера, удержание посетителей сайта, хранение сведений о текущем сеансе, показ целевой рекламы. При этом файлы устанавливает конкретный сервер, и только он может их прочитать.

\r\n\r\n

Разработчики устанавливают и читают cookie через заголовки Set-Cookie и Cookie непосредственно в протоколе HTTP. В приложениях куки устанавливают и считывают с помощью соответствующего API либо модуля файлов cookie на одном из серверных языков — например, Node.js.

\r\n\r\n

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

\r\n\r\n

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

\r\n\r\n

Чтобы минимизировать риски, юзеру при посещении незнакомых сайтов или при использовании публичных сетей лучше отказаться от автоматического приема куки-файлов. Альтернативный вариант — входить инкогнито.

\r\n\r\n

LocalStorage

\r\n\r\n

Это более продвинутый формат хранилища в браузере, позволяющий сайтам сохранять больше информации без ущерба для трафика. LocalStorage создали в качестве альтернативы cookie, чтобы обойти ограничения последних. А именно — небольшой объем хранилища, необходимость постоянно передавать данные с сервера в браузер и обратно. В localStorage работа с данными стала проще и эффективнее.

\r\n\r\n

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

\r\n\r\n

Информация хранится в формате «ключ-значение» в виде строк. Даже если ввести числовые или логические данные, они преобразуются в строчные. Для использования хранилища в JavaScript используют объект localStorage.

\r\n\r\n

\n \n \n \n

\r\n\r\n

Пример кода:

\r\n\r\n

\n    // Storing data in local storage\nlocalStorage.setItem(\"name\", \"Mathew\");\nlocalStorage.setItem(\"age\", \"33\");\n\n// Retrieving data from local storage\nconst name = localStorage.getItem(\"name\");\nconst age = localStorage.getItem(\"age\");\n\nconsole.log(name); // Output: Mathew\nconsole.log(age); // Output: 33\n\n// Removing data from local storage\nlocalStorage.removeItem(\"age\");\n\n// Clearing all data from local storage\nlocalStorage.clear();\n\n

\r\n\r\n

Запись напоминает код для сеансового хранилища. Метод setItem() используется для хранения данных, метод getItem() — для их получения, removeItem() — для удаления конкретных элементов, clear() — для полной очистки данных. Несмотря на то, что в localStorage сохраняются только строки, с помощью JSON разработчики могут взаимодействовать и с более сложными типами данных.

\r\n\r\n

Основные характеристики localStorage:

\r\n\r\n

данные хранятся бессрочно;
очистить хранилище можно только принудительно — через код JavaScript или полную очистку браузерного кэша пользователем;
объем данных для хранения — 5-10 МБ (по этому показателю localStorage лидирует среди всех хранилищ);
старыми браузерами не поддерживается — например, на IE7 это локальный ящик не работает;
действует по принципу ограничения домена — сохраненная информация доступна лишь одному источнику.

\r\n\r\n

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

\r\n\r\n

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

\r\n\r\n

SessionStorage

\r\n\r\n

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

\r\n\r\n

\n \n \n \n

\r\n\r\n

Объем хранилища ограничен, но в большинстве случаев этого достаточно для хранения инфы в пределах одного сеанса. Данные по сути не защищены, так что вопрос приватности — забота пользователя.

\r\n\r\n

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

\r\n\r\n

Для подключения сеансового хранилища разработчики на JavaScript используют объект sessionStorage и методы для получения, установки и удаления данных.

\r\n\r\n

Пример кода:

\r\n\r\n

\n    // Storing data in session storage\nsessionStorage.setItem(\"name\", \"Mathew\");\nsessionStorage.setItem(\"age\", \"33\");\n\n// Retrieving data from session storage\nconst name = sessionStorage.getItem(\"name\");\nconst age = sessionStorage.getItem(\"age\");\n\nconsole.log(name); // Output: Mathew\nconsole.log(age); // Output: 33\n\n// Removing data from session storage\nsessionStorage.removeItem(\"age\");\n\n// Clearing all data from session storage\nsessionStorage.clear();\n\n

\r\n\r\n

Как видите, есть определенное сходство с localStorage, поскольку у хранилищ одинаковый алгоритм работы. Метод setItem() применяется для сохранения данных (первый аргумент — ключ, второй — значение), метод получения — removeItem(), для очистки используется метод clear().

\r\n\r\n

Основные характеристики sessionStorage:

\r\n\r\n

данные хранятся в течение одной сессии, после закрытия браузера очищаются;
хранилище использует контекст браузера верхнего уровня, то есть в каждой вкладке содержатся уникальные данные;
объем данных — 5 МБ;
старые браузеры формат не поддерживают.

\r\n\r\n

Если вы открываете другую вкладку с той же страницей, там будут храниться уже другие данные. При этом перезагрузка страницы на данные не влияет, но если прервется сессия (например, временно отвалится интернет) информация обнулится.

\r\n\r\n

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

\r\n\r\n

Сравнение cookies, localStorage и sessionStorage

\r\n\r\n

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

\r\n\r\n

Размер хранилища

\r\n\r\n

Файлы cookie. Здесь размер минимальный. Для каждого домена куки могут хранить ограниченный объем данных — как правило, не больше 4 КБ.
LocalStorage. Максимально возможный объем данных для каждого домена — не менее 5 МБ, а при использовании определенных настроек и больше.
SessionStorage. Здесь хранится больше данных для одного домена в сравнении с cookies. Размер — не более 5 МБ.

\r\n\r\n

Срок хранения

\r\n\r\n

Файлы cookie. Данные куки могут быть сеансовыми или постоянными в зависимости от настроек. Постоянные имеют свой срок действия, который исчисляется месяцами или даже годами, сеансовые уничтожаются сразу после завершения сеанса.
LocalStorage. Данные в локальном хранилище остаются после закрытия браузера и его повторного открытия. Удалить их может только пользователь или код JavaScript.
SessionStorage. Информация в сеансовом хранилище остается, пока открыта вкладка сайта. При закрытии данные удаляются.

\r\n\r\n

Работа с данными

\r\n\r\n

Файлы cookie. Разработчик может установить срок действия для файлов, после которого браузер автоматически очистит куки.
LocalStorage. Нельзя запрограммировать автоматическое удаление данных или другие действия с ними. Они сохраняются, пока не будут удалены принудительно.
SessionStorage. Здесь нет механизма автоматического истечения срока действия. Поэтому данные будут актуальны, пока открыта страница.

\r\n\r\n

Доступ к данным

\r\n\r\n

Cookies. Доступ к файлам можно получить и изменить через JavaScript API, но существуют определенные ограничения для третьих лиц.
LocalStorage и sessionStorage. Есть прямой доступ к информации в хранилищах через API JavaScript, который позволяет манипулировать данными.

\r\n\r\n

Сетевой трафик

\r\n\r\n

Cookies. Данные автоматически отправляются на север после каждого HTTP-запроса для соответствующего домена, что увеличивает загрузку трафика.
LocalStorage и sessionStorage. Данные не отправляются на сервер, а остаются на стороне клиента, что сокращает объем лишнего трафика.

\r\n\r\n

Когда использовать cookies, localStorage и sessionStorage

\r\n\r\n

Использование различных способов хранения информации зависит от целей обращения с данными. На сайтах с авторизацией и значимой историей просмотра (например, в крупных онлайн-магазинах) важно, чтобы пользовательские данные сохранялись в большом объеме и как можно дольше, поэтому предпочтительным инструментом выступает localStorage.

\r\n\r\n

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

\r\n\r\n

Разницу в жизненном цикле cookies, localStorage и sessionStorage используют в соответствии с задачами хранения. Ограниченный срок действия cookies и данных сессионного хранилища могут стать преимуществами в одном случае и недостатками в другом. С данными localStorage аналогичная ситуация — если нужен полный контроль времени хранения, этот формат идеально подходит.

\r\n\r\n

Проблемы и перспективы хранилищ данных

\r\n\r\n

Все хранилища потенциально уязвимы для XSS-атак. В cookies применяют дополнительные меры защиты: флаги HTTPOnly и Secure запрещают доступ из JavaScript к файлам, чувствительным к безопасности. Для отправки таких файлов используется передача по шифрованным каналам HTTPS.

\r\n\r\n

Для защиты от атак CSRF (подделка межсайтовых запросов) используют атрибут SameSite, проверку HTTP_Referer/Origin или применение синхронизированных токенов.

\r\n\r\n

В localStorage для обеспечения безопасности важно соблюдать принцип одного источника и тоже пользоваться зашифрованными HTTPS-соединениями. При этом эксперты все равно не рекомендуют сохранять конфиденциальные данные в localStorage.

\r\n\r\n

Учитывайте, что куки могут замедлять загрузку, особенно если у пользователей низкая скорость интернета. LocalStorage на HTTP-запросы не влияет, что положительно отражается на производительности веб-ресурса.

\r\n\r\n

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

\r\n\r\n","created_at":"2025-02-25T17:00:03.000+03:00","updated_at":"2025-02-25T17:00:04.000+03:00","created_at_gmt":"2025-02-25T14:00:03.000+03:00","updated_at_gmt":"2025-02-25T14:00:04.000+03:00"},"link":"https://tproger.ru/articles/chto-takoe-cookies--localstorage-i-sessionstorage","type":"tproger","image":null,"title":"Что такое cookies, localStorage и sessionStorage: главные отличия и примеры","subType":"tproger_post","viewDomain":"tproger.ru"}},{"id":"7NqAekNJm3","type":"paragraph","data":{"text":"Presentational Components отвечают только за то, как что-то выглядит. Они получают данные через props и отображают их, больше ничего. Это, как правило, чистые функциональные компоненты, часто без собственного состояния (ну разве что мелкий UI-стейт типа «раскрыт ли dropdown»). Им всё равно, каким образом взять список пользователей — они просто ожидают условный props.users и отображают его в соответствии с дизайном."}},{"id":"_2FGv2N2Pv","type":"paragraph","data":{"text":"Container Components, напротив, знают, что показать и откуда это взять, но не занимаются тем, как это отображается. Они содержат в себе всю логику: могут загрузить данные, подписаться на store или контекст, хранить состояние, а рендерят в презентационных компоненты, передавая им готовые данные. Контейнер может вообще не иметь собственного HTML, кроме того, что приходит от дочернего презентационного компонента. Его задача — это взаимодействие с данными."}},{"id":"gGnBlU1AZt","type":"paragraph","data":{"text":"Зачем же нужен такой подход? Во-первых, лучшая разделённость ответственности (UI отдельно, данные отдельно) упрощает понимание и поддержку приложения. Во-вторых, улучшается переиспользование: один визуальный компонент вероятно использовать с разными источниками данных через разные контейнеры. Дизайнеры могут менять внешний вид компонента в одном месте, не затрагивая бизнес-логику. И тестировать тоже проще: можно отдельно протестировать логику контейнера (без верстки) и отдельно визуальный компонент (с моком данных)."}},{"id":"F-cO0RlE79","type":"code","data":{"code":"// Пример: презентационный компонент списка пользователей\n\nfunction UserList({ users }) {\n return (\n \n {users.map(user => (\n {user.name}\n ))}\n \n );\n}\n\n// Контейнерный компонент, загружающий пользователей\n\nfunction UserListContainer() {\n const [users, setUsers] = useState([]);\n useEffect(() => {\n fetch('/api/users')\n .then(res => res.json())\n .then(data => setUsers(data));\n }, []);\n return ;\n}","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"Pz8fn5pKYc","type":"paragraph","data":{"text":"В этом примере UserList не содержит никакого стейта, не подписан на store или контекст, лишь отображает список. Ему всё равно, как и где получают пользователей — просто принимает проп users и выводит его. Контейнер UserListContainer же занимается работой с данными: делает fetch, сохраняет результат в useState, и потом рендерит UserList, прокидывая в него данные. Благодаря такому делению компонент UserList легко переиспользовать — хоть для локальных данных, хоть для данных из Redux или context — достаточно написать другой контейнер."}},{"id":"0ecd8885-7199-4b0b-9aa7-f4df4fc6b99d","type":"embed","data":{"data":{"id":598,"seo":{"title":"Онлайн-курс «JAVA-разработчик» от EdMe.pro","description":"Теория, практика, подготовка к собеседованиям и трудоустройство — всё это на курсе «Java-разработчик» от EdMe.pro."},"link":"/courses/onlajn-kurs--java-razrabotchik--ot-edme-pro-5","logo":null,"name":"onlajn-kurs--java-razrabotchik--ot-edme-pro-5","tags":[{"id":1679,"name":"Java","slug":"java","type":["tag","job-skill"],"image":null,"title":"Java","counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/java","description":"Java — статьи, обучающие материалы и новости, посвящённые одному из самых популярных языков программирования.","backgroundType":"primary","backgroundNumber":1},{"id":2235,"name":"для начинающих","slug":"dlya-nachinayushhih","type":[],"image":null,"title":"для начинающих","counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/dlya-nachinayushhih","description":null,"backgroundType":"primary","backgroundNumber":1}],"shows":null,"speed":null,"title":"Онлайн-курс «JAVA-разработчик» от EdMe.pro","views":0,"clicks":0,"isOpen":true,"status":"publish","tariff":"BASIC","weight":10,"company":null,"content":"","dateEnd":null,"hasCert":false,"lessons":null,"regLink":"https://edme.pro/?utm_source=tproger&utm_medium=article_paid&utm_campaign=april_tproger&utm_content=07042025&utm_term=java","currency":{"code":"RUB","name":"Российский рубль","symbol":"₽"},"discount":null,"duration":null,"leadCost":null,"ordToken":"2W5zFGjPWx8","settings":{"showForm":false,"directTransition":false,"straightToTheLanding":false},"dateStart":null,"fullPrice":null,"promoCode":null,"thumbnail":null,"complexity":"NEWBIES","created_at":"2025-04-07T13:49:55.000+03:00","updated_at":"2025-04-08T03:17:02.000+03:00","classFormat":"ONLINE","description":"Теория, практика, подготовка к собеседованиям и трудоустройство — всё это на курсе «Java-разработчик» от EdMe.pro.","isPermanent":true,"previewLink":"3a67c2fa-1625-4539-9848-d6899031b6a0","regFormLink":"https://edme.pro/?utm_source=tproger&utm_medium=article_paid&utm_campaign=april_tproger&utm_content=07042025&utm_term=java","tagPriority":false,"currencyCode":"RUB","hoursPerWeek":null,"isHiddenDate":false,"manualWeight":null,"placeAddress":null,"publish_date":"2025-04-07T13:50:02.000+03:00","hasEmployment":true,"pricePerMouth":null,"regButtonText":"Зарегистрироваться на курс по Java","availablePlaces":null,"avgConversionRate":null,"ourTrafficConversion":null},"link":"https://tproger.ru/courses/onlajn-kurs--java-razrabotchik--ot-edme-pro-5?erid=2W5zFGjPWx8","type":"tproger","image":null,"title":"Онлайн-курс «JAVA-разработчик» от EdMe.pro","subType":"tproger_course","viewDomain":"tproger.ru"}},{"id":"kdp5sPvYoo","type":"paragraph","data":{"text":"Конечно, не всегда нужно городить пару компонентов вместо одного. Этот паттерн полезен, когда приложение растёт: вы начинаете замечать, что пропсы идут через несколько уровней просто транзитом, или один компонент слишком перегружен логикой. Тогда вы «вытаскиваете» логику в контейнер, а UI — в презентационный компонент, и код сразу становится чище. Это не обязательное правило, а приём для рефакторинга по мере необходимости."}},{"id":"68RVd1JT1_","type":"paragraph","data":{"text":"Стоит отметить, что с появлением React-хуков граница между логикой и отображением несколько размылась. Теперь можно выносить логику в кастомные хуки и вызывать их прямо внутри компонента, вместо того чтобы создавать отдельный контейнер-класс, как это делали до 2018 года. Тем не менее, принцип «держи логику отдельно от представления» по-прежнему полезен. Даже с хуками можно структурировать код, разделяя функциональность: написать хук useUsersData() для получения пользователей и применять его в разных компонентах (вместо дублирования запроса)."}},{"id":"7xcwnyXaXQ","type":"paragraph","data":{"text":"Плюсы: чёткое разделение обязанностей, возможность переиспользовать и заменять части независимо (UI-компонент можно переиспользовать с разными данными), облегчение тестирования."}},{"id":"b3797f1f-458b-4571-9443-13279d3c029a","type":"embed","data":{"data":{"id":591,"seo":{"title":"Курсы дизайна с помощью в трудоустройстве","description":"Обучение дизайнерским профессиям с нуля в крупнейшей профильной школе Contented."},"link":"/courses/kursy-d","logo":null,"name":"kursy-d","tags":[{"id":1692,"name":"Для начинающих","slug":"for-beginners","type":["tag","job-skill"],"image":null,"title":"Программирование для начинающих","counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/for-beginners","description":"Программирование для начинающих базируется на учебных планах и руководствах для новичков. В этом разделе содержатся материалы по основам программирования.","backgroundType":"primary","backgroundNumber":1},{"id":1844,"name":"Дизайн интерфейсов и UX","slug":"interface-design-ux","type":["tag"],"image":null,"title":"","counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/interface-design-ux","description":"Рекомендации и пособия для начинающих UX-дизайнеров, а также теоретическая информация обо всем, что нужно знать для создания интерфейсов.","backgroundType":"primary","backgroundNumber":1},{"id":1896,"name":"Веб-дизайн","slug":"veb-design","type":["tag","job-skill"],"image":null,"title":null,"counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/veb-design","description":"","backgroundType":"primary","backgroundNumber":1},{"id":2052,"name":"Дизайн","slug":"dizajn","type":["tag","job-skill"],"image":null,"title":null,"counter":0,"excerpt":"","imageLink":null,"isCategory":false,"publicLink":"/tag/dizajn","description":"","backgroundType":"primary","backgroundNumber":1}],"shows":null,"speed":null,"title":"Курсы дизайна с помощью в трудоустройстве","views":0,"clicks":0,"isOpen":true,"status":"publish","tariff":"BASIC","weight":10,"company":null,"content":"","dateEnd":null,"hasCert":false,"lessons":null,"regLink":"https://trk.ppdu.ru/click?uid=248774&pid=17&oid=314e0aa6-8c6a-4dae-b605-900bbdb8e59a&erid=2SDnjchFmrk","currency":{"code":"RUB","name":"Российский рубль","symbol":"₽"},"discount":null,"duration":null,"leadCost":null,"ordToken":"2SDnjchFmrk","settings":{"showForm":false,"directTransition":false,"straightToTheLanding":false},"dateStart":null,"fullPrice":null,"promoCode":null,"thumbnail":null,"complexity":"NEWBIES","created_at":"2025-03-20T12:44:08.000+03:00","updated_at":"2025-03-26T03:17:02.000+03:00","classFormat":"ONLINE","description":"Обучение дизайнерским профессиям с нуля в крупнейшей профильной школе Contented.","isPermanent":true,"previewLink":"75e5d8ed-cd82-4e4b-a223-7caabc059352","regFormLink":"https://trk.ppdu.ru/click?uid=248774&pid=17&oid=314e0aa6-8c6a-4dae-b605-900bbdb8e59a&erid=2SDnjchFmrk","tagPriority":false,"currencyCode":"RUB","hoursPerWeek":null,"isHiddenDate":false,"manualWeight":null,"placeAddress":null,"publish_date":"2025-03-25T11:16:54.000+03:00","hasEmployment":false,"pricePerMouth":null,"regButtonText":"Посмотреть курсы","availablePlaces":null,"avgConversionRate":null,"ourTrafficConversion":null},"link":"https://tproger.ru/courses/kursy-d?erid=2SDnjchFmrk","type":"tproger","image":null,"title":"Курсы дизайна с помощью в трудоустройстве","subType":"tproger_course","viewDomain":"tproger.ru"}},{"id":"FvwBfoZUgm","type":"paragraph","data":{"text":"Минусы: появляется больше файлов/компонентов, чем могло бы быть, что может казаться избыточным для мелких случаев. Иногда чрезмерное дробление на «глупые» и «умные» компоненты лишь усложняет структуру, если паттерн применён не к месту. Как говорится, включайте голову — не каждую кнопку нужно выделять в отдельный контейнер."}},{"id":"g8zRZOCtOF","type":"header2","data":{"text":"Higher-Order Component (HOC)","level":2},"tunes":{}},{"id":"Rfd9zIOYGi","type":"paragraph","data":{"text":"Когда я впервые услышал термин HOC, он показался мне чем-то из математики. Но на практике всё горадо прозаичнее: HOC — это всего лишь функция, которая принимает React-компонент и возвращает новый компонент, оборачивая исходный дополнительной функциональностью. Проще говоря, HOC — это «обёртка». Мы помещаем один компонент внутрь другого, чтобы на выходе получить расширенную версию переданного в HOC компонента."}},{"id":"UDXoNxDB3K","type":"paragraph","data":{"text":"Зачем это может понадобиться? Представим, у нас есть несколько разных компонентов, и всем им нужно что-то общее: например, обработка ошибок или подписка на внешние данные. Можно было бы скопировать этот код в каждый из компонентов, но куда элегантнее написать HOC один раз и применить ко всем. Классический пример — Redux-функция connect: вы пишете export default connect(mapState)(MyComponent), и ваш компонент получает пропсы из глобального стейта."}},{"id":"3Y-xPjS65-","type":"paragraph","data":{"text":" connect — как раз и есть HOC, который инъектирует данные из Redux в компонент, не требуя от вас переписывать все под Redux вручную."}},{"id":"2f550ef7-504f-4780-a21a-9ad554ae8d8c","type":"embed","data":{"data":{"id":253623,"name":"10-proektov-i-servisov--kotorye-google-ubila-v-2024-godu","type":"post","title":"Названы топ-10 проектов и сервисов, которые Google убила в 2024 году","author":94744,"parent":72711,"status":"publish","content":"

2024 год стал для Google годом масштабной реорганизации.

\r\n\r\n

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

\r\n\r\n

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

\r\n\r\n

Конец эры Chromecast

\r\n\r\n

Google завершила поддержку Chromecast первого поколения, выпущенного в 2013 году.

\r\n\r\n

Этот гаджет, превращавший обычные телевизоры в «умные», уступил место более современному Google TV Streamer.

\r\n\r\n

Завершение истории Jamboard

\r\n\r\n

Цифровая доска Jamboard, созданная для совместной работы, прекратила получать обновления еще 30 сентября. Полное отключение приложения произошло 31 декабря.

\r\n\r\n

Google Podcasts уходит в YouTube Music

\r\n\r\n

Google объединила функции подкастов с YouTube Music, закрыв Google Podcasts.

\r\n\r\n

При этом IT-гигант предоставил пользователям инструменты для переноса данных.

\r\n\r\n

Снятие с производства Pixel Fold и Pixel 7

\r\n\r\n

Из «смартфонного» сегмента можно отметить, что Google прекратила выпуск Pixel Fold, Pixel 7 и 7 Pro.

\r\n\r\n

Впрочем, это решение было ожидаемым после выхода новых моделей.

\r\n\r\n

Список других закрытых проектов

\r\n\r\n

Также среди убитых компанией проектов можно отметить: Stack (PDF-сканер), Play Movies & TV, базовый HTML-режим Gmail, VPN by Google One, Keen и Dropcam. Большинство из них либо устарели, либо стали частью более крупных решений.

\r\n\r\n","created_at":"2024-12-23T07:29:47.000+03:00","updated_at":"2024-12-23T07:30:57.000+03:00","created_at_gmt":"2024-12-23T04:29:47.000+03:00","updated_at_gmt":"2024-12-23T04:30:57.000+03:00"},"link":"https://tproger.ru/news/10-proektov-i-servisov--kotorye-google-ubila-v-2024-godu","type":"tproger","image":null,"title":"Названы топ-10 проектов и сервисов, которые Google убила в 2024 году","subType":"tproger_post","viewDomain":"tproger.ru"}},{"id":"Hy_-RPbZOO","type":"paragraph","data":{"text":"Создать свой HOC тоже несложно. Супер банальный пример — сделаем HOC, который добавляет компоненту стейт счётчика:"}},{"id":"R-zqMJ31eE","type":"code","data":{"code":"function withCounter(WrappedComponent) {\n // Возвращаем новый компонент-обёртку\n return function WithCounter(props) {\n const [count, setCount] = useState(0);\n // Передаем внутрь исходного компонента счётчик и функцию для увеличения\n return setCount(c => c + 1)} {...props} />;\n };\n}\n// Использование HOC:\nfunction ClickButton({ count, increment, label }) {\n return {label}: {count};\n}\nconst EnhancedButton = withCounter(ClickButton);","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"4Q529E3nA-","type":"paragraph","data":{"text":"Здесь withCounter — HOC, он возвращает новый функциональный компонент WithCounter, который внутри себя использует useState и передаёт состояние и функцию увеличения внутрь WrappedComponent. В итоге EnhancedButton — это улучшенная версия ClickButton, которая умеет считать клики, даже если исходный ClickButton об этом не знал."}},{"id":"eAUcSM9jg9","type":"paragraph","data":{"text":"Плюсы: один HOC может добавить функциональность множеству компонентов сразу — не надо копировать код везде. Логику обновляется в одном месте (внутри HOC) — и все обёрнутые компоненты получают изменения. HOC можно комбинировать: например, обернуть компонент сначала в HOC, добавляющий тему оформления, потом в HOC, добавляющий логирование, и т.д. В итоге получим компонент, обладающий сразу несколькими дополнительными возможностями."}},{"id":"FQoGiZUKjx","type":"paragraph","data":{"text":"Минусы: за такую магию мы платим усложнением структуры. Когда компонентов обёрток становится много, React-дерево раздувается, и возникает эффект «матрёшки». В DevTools вы могли видеть что-то вроде: Connect(withRouter(WithTheme(MyComponent))) — разобраться, что к чему, становится сложнее. Дебаг таких цепочек — тоже удовольствие то ещё, приходится пробираться через несколько уровней абстракций. Кроме того, HOC часто прокидывают пропсы во внутренний компонент, что чревато конфликтами имён (нужно следить, чтобы, например, prop.title от HOC не перезаписал пропс title, который вы передали самому компоненту). Ещё нюанс — HOC усложняют типизацию в TypeScript (надо правильно описывать generic для пропсов), но это выходит за рамки нашей темы."}},{"id":"1bf69ad5-bbb6-43b1-a452-14892c450a28","type":"banner-blank","data":{}},{"id":"g9aNe1Mlud","type":"paragraph","data":{"text":"React-разработчики со временем несколько охладели к HOC. В официальной документации прямо сказано: «компоненты высшего порядка не так часто используются в современном React-коде». Отчасти их вытеснили хуки, тем не менее, HOC никуда не делись: их продолжают применять сторонние библиотеки — тот же Redux, Relay и другие. Да, и в старом проекте вы почти наверняка встретите хотя бы пару HOC. Поэтому понимать этот паттерн стоит. Просто имейте в виду современные альтернативы и используйте HOC там, где это действительно необходимо."}},{"id":"9O-nmtNV4w","type":"header2","data":{"text":"Паттерн Render Props","level":2},"tunes":{}},{"id":"kb7Fzeiiwb","type":"paragraph","data":{"text":"Следующий паттерн я бы назвал «перевёрнутый HOC». Render Props — это подход, когда компонент сам не рендерит что-то внутри себя, а принимает функцию (часто через проп render или просто используя детей как функцию) и вызывает её, чтобы получить содержимое. То есть мы передаём компоненту инструкцию, что именно отрендерить, а он сам обеспечивает, когда и с какими данными вызвать эту инструкцию."}},{"id":"-PJn3Hfe1T","type":"paragraph","data":{"text":"Представьте компонент <MouseTracker> для отслеживания положения курсора. Классически он может хранить x, y в своём состоянии и отрисовывать, скажем, <p>Mouse at (x, y)</p>. Но что, если мы хотим переиспользовать эту логику уже с другим UI? Паттерн Render Props предлагает сделать компонент <Mouse>, который не определяет жёстко JSX внутри себя, а вызывает функцию, переданную через проп (или children функцию), передавая ей координаты. Эта функция сама решит, что рисовать. Таким образом, <Mouse> инкапсулирует логику (слежение за мышкой), а отображение делегирует наружу."}},{"id":"zQqszJ99eK","type":"paragraph","data":{"text":"Пример: реализуем компонент-утилиту <FilteredList items={...} filter={...}>, который отображает список на основе передаваемого фильтра. Вместо того чтобы жёстко прописывать разметку элемента списка, сделаем его с render проп через children:"}},{"id":"NnC7LeRJD8","type":"code","data":{"code":"function FilteredList({ items, filter, children }) {\n const filtered = items.filter(filter);\n // Вызываем функцию-ребёнка для каждого элемента, оборачивая в \n return {filtered.map(item => children(item))};\n}\n// Использование:\n n % 2 === 0}>\n {item => {item}}\n","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"LGLJ8vuz_l","type":"paragraph","data":{"text":"Здесь <FilteredList> знает, как отфильтровать массив (items.filter(filter)), но не знает, как отрисовать каждый элемент. Вместо этого он вызывает функцию, которую мы передали в качестве дочернего элемента (children), для каждого элемента списка. Эта функция возвращает <li> для каждого item. В результате логика фильтрации инкапсулируется внутри FilteredList, а конкретное отображение списка задаётся извне. Мы могли бы так же использовать этот компонент для массива объектов, отрисовывая, например, товары — достаточно передать другую children-функцию."}},{"id":"34ad7fa9-5922-431a-bd2a-7cf3c9db265d","type":"banner-blank","data":{}},{"id":"IxOjVFR1ps","type":"paragraph","data":{"text":"Паттерн Render Props здорово повышает гибкость компонентов. Мы можем переиспользовать <FilteredList> для списков чего угодно — чисел, пользователей, товаров — просто изменяя функцию отображения. Другой пример: компонент <Mouse> может предоставлять координаты курсора, а внешний код решит, просто вывести текст, нарисовать по координатам картинку или вызвать какую-то совершенно другую логику — не нужно делать несколько вариаций компонента для каждого кейса."}},{"id":"8aTiwsyjH2","type":"paragraph","data":{"text":"Плюсы: Render Props позволяет компоненту-провайдеру (в примере выше FilteredList является провайдером данных) быть максимально универсальным, а конкретную разметку делегировать наружу. Многие библиотеки воспользовались этим паттерном: например, React Router (до версии 6) позволял вместо компонента страницы передать проп render в <Route> — функцию, которая отрисует JSX на основе параметров маршрута. Formik предлагал компонент <Formik> с функцией-ребёнком для рендеринга формы. Downshift (библиотека для автокомплитов) — тоже классический пример паттерна render props."}},{"id":"BNDTJkWl0C","type":"paragraph","data":{"text":"Минусы: главное неудобство — излишний шум в JSX. Код с вложенными функциями бывает тяжело читать. В нашем простом примере всё компактно, но представьте, если у вас будет несколько уровней таких компонентов: <Foo>{foo => ( <Bar>{bar => ( ... )}</Bar> )}</Foo> — легко получить «оберточный ад» из стрелочных функций прямо в разметке. Это значительно затруднит отладку такого кода при возникновении каких-либо проблем. К тому же, каждый раз при рендере создаётся новая функция, что может негативно сказаться на производительности, если таких компонентов много (React конечно оптимизирует функции в пропсах через механизм сравнения, но всё же). Также возникает неявная связь: внешний код должен знать, какие аргументы ожидает функция. TypeScript конечно помогает, но при чтении кода не сразу видно, что children, например, это не просто элемент, а функция."}},{"id":"1fd2600a-9cd3-4c93-b5e3-fbd7c52a21eb","type":"banner-blank","data":{}},{"id":"q-ZziW2XBn","type":"paragraph","data":{"text":"Как и HOC, паттерн Render Props сейчас используется реже. Многие задачи, решаемые через него, теперь элегантнее с точки зрения кода решаются хуками, в официальной документации это также отмечено. Но всё же понимать его нужно, потому что легаси-код и некоторые библиотеки всё ещё работают на нём. Если видите, что компонент принимает функцию в виде пропса (чаще всего называется render или передаваётся через детей), знайте — это он, Render Props."}},{"id":"Wg-3i4z0NI","type":"hint","data":{"text":"В следующей части расскажу про хуки и кастомные хуки, а также про Compound Components и Серверные компоненты и Suspense.","fullWidth":true}}],"version":"2.25.0"}

Ошибка в настройках сайта