Frontend | Вопросы собесов
Kanalga Telegram’da o‘tish
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads
Ko'proq ko'rsatish
📈 Telegram kanali Frontend | Вопросы собесов analitikasi
Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 17 320 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 477-o'rinni va Rossiya mintaqasida 37 825-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 17 320 obunachiga ega bo‘ldi.
06 Noyabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -291 ga, so‘nggi 24 soatda esa -11 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 6.55% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.40% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 135 marta ko‘riladi; birinchi sutkada odatda 763 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 4 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent ставь, браузер, html, border, flex kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy
Контакт для рекламы: @sendme_ads”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 07 Noyabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
17 320
Obunachilar
-1124 soatlar
-857 kun
-29130 kun
Postlar arxiv
\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-12-29T09:10:13Z","dateModified":"2024-12-29T09:10:13Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3559},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":25}]}},{"@type":"ListItem","position":2,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/996","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/996","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/996","headline":"🤔 Зачем нам нужен менеджер состояния? Менеджер состояния используется для централизованного управления данным…","articleBody":"🤔 Зачем нам нужен менеджер состояния?\n\nМенеджер состояния используется для централизованного управления данными в приложении. Это упрощает обмен данными между компонентами, делает состояние приложения предсказуемым и упрощает отладку. Например, Vuex или Redux помогают управлять состоянием в сложных приложениях.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2024-12-28T16:10:10Z","dateModified":"2024-12-28T16:10:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3424},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/995","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/995","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/995","headline":"🤔 Вычисляемые свойства, что такое, как использовать? Это функция в JavaScript, которая позволяет использовать…","articleBody":"🤔 Вычисляемые свойства, что такое, как использовать? \n\nЭто функция в JavaScript, которая позволяет использовать выражения в качестве имен свойств объекта. Это особенно полезно, когда имя свойства динамически вычисляется или создается на основе переменной.\n\n🚩Синтаксис\n\nВычисляемые свойства в объектных литералах задаются в квадратных скобках [].\nlet propName = 'name';\nlet person = {\n [propName]: 'Alice'\n};\nconsole.log(person.name); // 'Alice'\n\n🚩Использование вычисляемых свойств\n\n1⃣Динамическое имя свойства на основе переменной\nlet key = 'age';\nlet person = {\n name: 'Alice',\n [key]: 25\n};\n\nconsole.log(person.name); // 'Alice'\nconsole.log(person.age); // 25\n\n2⃣Использование выражений в качестве имен свойств\nlet i = 0;\nlet obj = {\n ['prop_' + ++i]: i,\n ['prop_' + ++i]: i,\n ['prop_' + ++i]: i\n};\n\nconsole.log(obj); // { prop_1: 1, prop_2: 2, prop_3: 3 }\n\n3⃣Вложенные вычисляемые свойства\nlet prefix = 'user';\nlet index = 1;\nlet users = {\n [prefix + index]: { name: 'Alice' },\n [prefix + (index + 1)]: { name: 'Bob' }\n};\n\nconsole.log(users.user1.name); // 'Alice'\nconsole.log(users.user2.name); // 'Bob'\n\n4⃣Использование функции для вычисления имен свойств\nfunction createKey(base, index) {\n return base + index;\n}\n\nlet obj = {\n [createKey('key', 1)]: 'value1',\n [createKey('key', 2)]: 'value2'\n};\n\nconsole.log(obj.key1); // 'value1'\nconsole.log(obj.key2); // 'value2'\n\n🚩Применение в реальных сценариях\n\n🟠Создание объекта с динамическими ключами\nПредположим, вам нужно создать объект для хранения оценок студентов, где ключи представляют собой имена студентов, а значения — их оценки.\nlet studentName1 = 'Alice';\nlet studentName2 = 'Bob';\n\nlet grades = {\n [studentName1]: 85,\n [studentName2]: 92\n};\n\nconsole.log(grades.Alice); // 85\nconsole.log(grades.Bob); // 92\n\n🟠Использование вычисляемых свойств для формирования запросов\nДопустим, у вас есть объект, представляющий параметры фильтра для поиска, и вы хотите динамически создавать ключи на основе выбранных фильтров.\nfunction getFilterKey(filterName) {\n return `filter_${filterName}`;\n}\n\nlet filters = {};\nfilters[getFilterKey('age')] = 25;\nfilters[getFilterKey('location')] = 'New York';\n\nconsole.log(filters); // { filter_age: 25, filter_location: 'New York' }\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-12-28T09:10:26Z","dateModified":"2024-12-28T09:10:26Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3745},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":22},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/994","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/994","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/994","headline":"🤔 Что такое CORS? CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет или зап…","articleBody":"🤔 Что такое CORS?\n\nCORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет или запрещает доступ к ресурсам с одного домена другим доменам. Он необходим, чтобы браузеры контролировали запросы, отправляемые с одного источника (origin) на другой, и защищали приложения от нежелательного обмена данными.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2024-12-27T16:10:12Z","dateModified":"2024-12-27T16:10:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3760},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":29},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":25},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/993","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/993","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/993","headline":"🤔 Что такое экшн, и как изменить состояние? Это объект, который отправляется в хранилище (store) и содержит и…","articleBody":"🤔 Что такое экшн, и как изменить состояние? \n\nЭто объект, который отправляется в хранилище (store) и содержит информацию о том, что произошло. Экшны являются единственным источником информации для хранилища, которое использует их для определения, как изменить текущее состояние.\n\n🚩Структура экшна\n\nЭто простой объект JavaScript, который должен содержать, по крайней мере, одно свойство type, указывающее тип экшна. Дополнительно могут быть добавлены другие свойства для передачи данных.\nconst incrementAction = {\n type: 'INCREMENT'\n};\nconst addTodoAction = {\n type: 'ADD_TODO',\n payload: {\n id: 1,\n text: 'Learn Redux'\n }\n};\n\n🚩Создатели экшнов (Action Creators)\n\nЭто функции, которые создают экшны. Это полезно для создания экшнов динамически и обеспечения единообразия.\nconst increment = () => {\n return {\n type: 'INCREMENT'\n };\n};\nconst addTodo = (id, text) => {\n return {\n type: 'ADD_TODO',\n payload: {\n id,\n text\n }\n };\n};\n\n🚩Изменение состояния с помощью редьюсера\n\nЧтобы изменить состояние в Redux, используется редьюсер. Редьюсер — это функция, которая принимает текущее состояние и экшн, а затем возвращает новое состояние.\nconst initialState = {\n count: 0,\n todos: []\n};\n\nconst rootReducer = (state = initialState, action) => {\n switch (action.type) {\n case 'INCREMENT':\n return {\n ...state,\n count: state.count + 1\n };\n case 'ADD_TODO':\n return {\n ...state,\n todos: [...state.todos, action.payload]\n };\n default:\n return state;\n }\n};\n\n🚩Пример использования Redux в React\n\n1⃣Установка Redux\nСначала установим необходимые пакеты\nnpm install redux react-redux\n\n2⃣Создание хранилища (store)\nimport { createStore } from 'redux';\nimport rootReducer from './reducers';\nconst store = createStore(rootReducer);\n\n3⃣Подключение React к Redux\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport App from './App';\nimport store from './store';\nReactDOM.render(\n \n ,\n document.getElementById('root')\n);\n\n🚩Объяснение\n\n1⃣Создание экшнов\n const incrementAction = { type: 'INCREMENT' };\n const addTodoAction = {\n type: 'ADD_TODO',\n payload: { id: 1, text: 'Learn Redux' }\n };\n\n2⃣Создатели экшнов\n const increment = () => ({ type: 'INCREMENT' });\n const addTodo = (id, text) => ({\n type: 'ADD_TODO',\n payload: { id, text }\n });\n\n3⃣Редьюсер\n const rootReducer = (state = initialState, action) => {\n switch (action.type) {\n case 'INCREMENT':\n return { ...state, count: state.count + 1 };\n case 'ADD_TODO':\n return { ...state, todos: [...state.todos, action.payload] };\n default:\n return state;\n }\n };\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-12-27T09:10:16Z","dateModified":"2024-12-27T09:10:16Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3723},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/992","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/992","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/992","headline":"🤔 Какими способами можно скрыть элемент? 1. display: none; — элемент удаляется из визуального потока страницы…","articleBody":"🤔 Какими способами можно скрыть элемент?\n\n1. display: none; — элемент удаляется из визуального потока страницы.\n2. visibility: hidden; — элемент остаётся на странице, но становится невидимым.\n3. opacity: 0; — элемент остаётся видимым для событий, но становится прозрачным.\n4. С помощью JavaScript: удаление элемента (removeChild) или добавление атрибута hidden.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2024-12-26T16:10:12Z","dateModified":"2024-12-26T16:10:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":6,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3507},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":41},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":6}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/991","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/991","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/991","headline":"🤔 Что такое редьюсер, и какие параметры он принимает? В контексте JavaScript, редьюсер (reducer) — это функци…","articleBody":"🤔 Что такое редьюсер, и какие параметры он принимает? \n\nВ контексте JavaScript, редьюсер (reducer) — это функция, которая принимает текущее состояние и действие, а затем возвращает новое состояние. Редьюсеры широко используются в библиотеке Redux для управления состоянием приложения.\n\n🚩Основная концепция \n\n1⃣Принимает два аргумента\nТекущее состояние (state) \nДействие (action)\n2⃣Возвращает новое состояние.\n\nconst reducer = (state, action) => {\n switch (action.type) {\n case 'ACTION_TYPE':\n // Возвращаем новое состояние\n return {\n ...state,\n // Обновляем определенные свойства\n };\n default:\n return state;\n }\n};\n\n🚩Пример использования редьюсера\n\nИнициализация состояния\nconst initialState = {\n count: 0\n};\n\nОпределение редьюсера\nconst counterReducer = (state = initialState, action) => {\n switch (action.type) {\n case 'INCREMENT':\n return {\n ...state,\n count: state.count + 1\n };\n case 'DECREMENT':\n return {\n ...state,\n count: state.count - 1\n };\n default:\n return state;\n }\n};\n\n🚩Использование редьюсера с useReducer в React\n\nReact предоставляет хук useReducer для управления состоянием с помощью редьюсера в функциональных компонентах.\nimport React, { useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\nconst counterReducer = (state, action) => {\n switch (action.type) {\n case 'INCREMENT':\n return { count: state.count + 1 };\n case 'DECREMENT':\n return { count: state.count - 1 };\n default:\n return state;\n }\n};\n\nconst Counter = () => {\n const [state, dispatch] = useReducer(counterReducer, initialState);\n\n return (\n \n \n );\n};\nexport default App;\n\n🟠useReducer\nuseReducer — это альтернатива useState для управления более сложным состоянием в компоненте.\nimport React, { useReducer } from 'react';\nconst initialState = { count: 0 };\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment':\n return { count: state.count + 1 };\n case 'decrement':\n return { count: state.count - 1 };\n default:\n throw new Error();\n }\n}\nconst Counter = () => {\n const [state, dispatch] = useReducer(reducer, initialState);\n return (\n \n {user.name} - {user.age} years old\n \n))} \n \n2⃣Атрибут key\n \n\n🚩Отрисовка сложных компонентов\n\nЕсли каждый элемент массива представляет собой более сложный компонент, можно создать отдельный компонент для каждого элемента и использовать его внутри map().\nimport React from 'react';\n\nconst users = [\n { id: 1, name: 'Alice', age: 25, email: 'alice@example.com' },\n { id: 2, name: 'Bob', age: 30, email: 'bob@example.com' },\n { id: 3, name: 'Charlie', age: 35, email: 'charlie@example.com' }\n];\n\nconst UserItem = ({ user }) => {\n return (\n 
\n
\n );\n};\n\nexport default Counter;\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-12-26T09:10:08Z","dateModified":"2024-12-26T09:10:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":23,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3597},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":23}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/990","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/990","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/990","headline":"Frontend | Вопросы собесов","datePublished":"2024-12-25T16:10:06Z","dateModified":"2024-12-26T19:23:44Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":6,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1327},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":6}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/989","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/989","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/989","headline":"📌 Как отследить демонтирование функционального компонента? 💬 Спрашивают в 6% собеседований В функциональных к…","articleBody":"📌 Как отследить демонтирование функционального компонента? \n\n💬 Спрашивают в 6% собеседований\n\nВ функциональных компонентах React можно отслеживать демонтирование компонента с помощью хука useEffect. Когда компонент демонтируется, React вызывает функцию очистки, которую можно определить внутри useEffect.\n\n🤔 Использование `useEffect` для отслеживания демонтирования\n\nХук useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Функция очистки, возвращаемая из useEffect, выполняется при демонтировании компонента.\n\n🤔 Пример использования\nimport React, { useEffect } from 'react';\n\nconst MyComponent = () => {\n useEffect(() => {\n console.log('Component mounted');\n\n // Функция очистки вызывается при демонтировании компонента\n return () => {\n console.log('Component will unmount');\n };\n }, []); // Пустой массив зависимостей означает, что эффект выполнится только при монтировании и демонтировании\n\n return (\n Count: {state.count}
\n \n \n\n
\n );\n};\n\nexport default MyComponent;\n\n🤔 Объяснение\n\n1️⃣ Хук `useEffect`:\n useEffect(() => {\n console.log('Component mounted');\n\n return () => {\n console.log('Component will unmount');\n };\n }, []);\n \n - Первый аргумент: Функция, которая выполняется после рендеринга компонента. Если эта функция возвращает другую функцию, она будет вызвана при демонтировании компонента.\n - Второй аргумент: Массив зависимостей. Если массив пуст, эффект будет выполнен только при монтировании и демонтировании компонента.\n\n🤔 Пример с реальным использованием\n\nРассмотрим пример, где мы используем WebSocket и хотим закрыть соединение при демонтировании компонента.\nimport React, { useEffect, useState } from 'react';\n\nconst WebSocketComponent = () => {\n const [messages, setMessages] = useState([]);\n\n useEffect(() => {\n const socket = new WebSocket('ws://example.com/socket');\n\n socket.onmessage = (event) => {\n setMessages((prevMessages) => [...prevMessages, event.data]);\n };\n\n console.log('WebSocket connection opened');\n\n return () => {\n socket.close();\n console.log('WebSocket connection closed');\n };\n }, []);\n\n return (\n My Component
\n\n
\n );\n};\n\nexport default WebSocketComponent;\n\n🤔 Объяснение\n\n1️⃣ Открытие WebSocket соединения:\n const socket = new WebSocket('ws://example.com/socket');\n \n Соединение открывается при монтировании компонента.\n\n2️⃣ Обработка входящих сообщений:\n socket.onmessage = (event) => {\n setMessages((prevMessages) => [...prevMessages, event.data]);\n };\n \n Входящие сообщения добавляются в состояние компонента.\n\n3️⃣ Закрытие WebSocket соединения при демонтировании:\n return () => {\n socket.close();\n console.log('WebSocket connection closed');\n };\n \n Соединение закрывается при демонтировании компонента, что предотвращает утечки памяти и другие потенциальные проблемы.\n\n🤔 Итог\n\nДля отслеживания демонтирования функционального компонента в React используйте функцию очистки внутри хука useEffect. Это полезно для выполнения операций очистки, таких как закрытие соединений, отмена подписок или освобождение ресурсов.\n\nКороче говоря: Используйте хук useEffect с функцией очистки, чтобы отслеживать демонтирование функционального компонента и выполнять необходимые операции очистки.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-12-25T09:10:07Z","dateModified":"2024-12-25T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3536},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/988","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/988","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/988","headline":"🤔 Что такое псевдоэлемент? Псевдоэлемент — это CSS-конструкция, которая позволяет стилизовать определённые ча…","articleBody":"🤔 Что такое псевдоэлемент?\n\nПсевдоэлемент — это CSS-конструкция, которая позволяет стилизовать определённые части элемента, например, ::before для добавления контента перед элементом или ::after для добавления после. Это удобно для оформления, не изменяя HTML-структуру.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2024-12-24T16:10:11Z","dateModified":"2024-12-24T16:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3587},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/987","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/987","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/987","headline":"🤔 Какие основные реакт хуки знаешь и используешь? React предоставляет несколько основных хуков (hooks), котор…","articleBody":"🤔 Какие основные реакт хуки знаешь и используешь? \n\nReact предоставляет несколько основных хуков (hooks), которые позволяют использовать состояние и другие возможности React в функциональных компонентах.\n\n🟠useState\nuseState позволяет добавить состояние в функциональный компонент.\nimport React, { useState } from 'react';\nconst Counter = () => {\n const [count, setCount] = useState(0);\n return (\n WebSocket Messages
\n- \n {messages.map((message, index) => (\n
- {message} \n ))}\n
\n
\n );\n};\nexport default Counter;\n\n🟠useContext\nuseContext позволяет использовать контекст для передачи данных через дерево компонентов без необходимости передавать пропсы на промежуточных уровнях.\nimport React, { useContext } from 'react';\nconst ThemeContext = React.createContext('light');\nconst ThemedComponent = () => {\n const theme = useContext(ThemeContext);\n return Count: {count}
\n \n\n The current theme is {theme}\n
;\n};\nconst App = () => {\n return (\n \n
\n );\n};\nexport default Counter;\n\n🟠useRef\nuseRef возвращает изменяемый объект-реф, который сохраняется при повторных рендерах компонента. Это часто используется для доступа к DOM-элементам или для сохранения переменных, которые не вызывают повторный рендер при изменении.\nimport React, { useRef } from 'react';\nconst TextInputWithFocusButton = () => {\n const inputEl = useRef(null);\n const onButtonClick = () => {\n // \"current\" указывает на смонтированный элемент input\n inputEl.current.focus();\n };\n return (\n Count: {state.count}
\n \n \n\n \n \n
\n );\n};\nexport default TextInputWithFocusButton;\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-12-24T09:10:08Z","dateModified":"2024-12-24T09:10:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3889},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/986","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/986","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/986","headline":"🤔 Что такое IIFE? IIFE (Immediately Invoked Function Expression) — это функция в JavaScript, которая вызывает…","articleBody":"🤔 Что такое IIFE?\n\nIIFE (Immediately Invoked Function Expression) — это функция в JavaScript, которая вызывается сразу после определения. Она используется для создания изолированного пространства имён, чтобы избежать конфликтов в глобальной области видимости. \n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2024-12-23T16:10:08Z","dateModified":"2024-12-23T16:10:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3611},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/985","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/985","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/985","headline":"🤔 В чём отличие между контролируемыми и неконтролируемыми объектами? В React различают два типа компонентов д…","articleBody":"🤔 В чём отличие между контролируемыми и неконтролируемыми объектами? \n\nВ React различают два типа компонентов для обработки пользовательского ввода: контролируемые (controlled) и неконтролируемые (uncontrolled) компоненты. Понимание их различий важно для выбора подходящего способа управления состоянием формы.\n\n🚩Контролируемые компоненты\n\nКонтролируемый компонент управляет своим состоянием через React. Это означает, что состояние элемента формы (например, значение текстового поля) хранится в состоянии (state) компонента и обновляется через React.\nimport React, { useState } from 'react';\n\nconst ControlledComponent = () => {\n const [inputValue, setInputValue] = useState('');\n\n const handleChange = (event) => {\n setInputValue(event.target.value);\n };\n\n return (\n \n \n
\n );\n};\n\nexport default ControlledComponent;\n\n🚩Особенности контролируемых компонентов\n\n🟠Состояние в React\nЗначение элемента формы хранится в состоянии компонента.\n🟠Обработка событий\nВсе изменения отслеживаются через события (например, onChange) и обновляют состояние компонента.\n🟠Односторонний поток данных\nДанные идут от состояния компонента к элементу формы, обеспечивая контроль над значением.\n\n🚩Неконтролируемые компоненты\n\nНеконтролируемый компонент управляет своим состоянием через DOM. Значение элемента формы извлекается непосредственно из DOM, а не из состояния компонента.\nimport React, { useRef } from 'react';\n\nconst UncontrolledComponent = () => {\n const inputRef = useRef(null);\n\n const handleSubmit = (event) => {\n event.preventDefault();\n alert('Submitted value: ' + inputRef.current.value);\n };\n\n return (\n \n );\n};\n\nexport default UncontrolledComponent;\n\n🚩Особенности неконтролируемых компонентов\n\n🟠Состояние в DOM\nЗначение элемента формы хранится в самом DOM-элементе.\n🟠Использование рефов\nДля доступа к значению элемента используется реф (например, через useRef).\n🟠Двусторонний поток данных\nДанные могут быть извлечены из DOM в любой момент времени, что делает управление состоянием менее очевидным.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-12-23T09:10:25Z","dateModified":"2024-12-23T09:10:25Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":6,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3935},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":25},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":6}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/984","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/984","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/984","headline":"🤔 Использование хука useEffect в React - useEffect позволяет выполнять побочные эффекты в функциональных комп…","articleBody":"🤔 Использование хука useEffect в React\n\n- useEffect позволяет выполнять побочные эффекты в функциональных компонентах React.\n- Хук может заменить методы жизненного цикла классовых компонентов для выполнения кода после каждого рендеринга.\n- Принимает функцию эффекта и массив зависимостей, указывая, при изменении каких пропсов или состояний должен выполняться эффект.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2024-12-22T16:10:11Z","dateModified":"2024-12-22T16:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3684},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/983","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/983","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/983","headline":"📺 Уникальная база записей IT собеседований 300+ записей реальных собеседований на программиста, тестировщика,…","articleBody":"📺 Уникальная база записей IT собеседований\n\n300+ записей реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы. \n\nЗаписи собесов от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д.\n\n🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!\n\nУ тебя есть запись собеседования? Мы готовы ее купить и заплатим до 3000 руб. за каждую","datePublished":"2024-12-22T15:45:40Z","dateModified":"2024-12-26T19:29:18Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2212},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/982","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/982","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/982","headline":"Миграция в облако? Это легко! Собственная инфраструктура устарела или не справляется с нагрузками? Используйт…","articleBody":"Миграция в облако? Это легко!\n\nСобственная инфраструктура устарела или не справляется с нагрузками? Используйте облачные ресурсы! Эксперты Yandex Cloud помогут перейти в облако быстро, легко и безопасно.\n\n✅ Мы полностью сопровождаем процесс.\n✅ От вас — только инженер с доступом к инфраструктуре.\n✅ Архитектура под ваши задачи, миграция и поддержка на каждом шагу — всё включено.\n\n⚡Переходите в Yandex Cloud и забудьте о старом железе. А если успеете подать заявку до 31 декабря, мы покроем расходы на инженеров и тестовую инфраструктуру. \n\nПодать заявку\n\n#реклама 16+\nyandex.cloud\nО рекламодателе\nРеклама на Яндексе","datePublished":"2024-12-22T13:13:00Z","dateModified":"2024-12-26T19:29:18Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2067},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/981","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/981","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/981","headline":"🤔 Как отрисовать массив элементов? В React для отрисовки массива элементов используется метод map(), который…","articleBody":"🤔 Как отрисовать массив элементов? \n\nВ React для отрисовки массива элементов используется метод map(), который позволяет перебрать массив и вернуть JSX для каждого элемента. Это удобный и декларативный способ создания списков элементов.\n\n🚩Пример использования `map()` для отрисовки массива\n\nimport React from 'react';\n\nconst users = [\n { id: 1, name: 'Alice', age: 25 },\n { id: 2, name: 'Bob', age: 30 },\n { id: 3, name: 'Charlie', age: 35 }\n];\n\nconst UserList = () => {\n return (\n Current value: {inputValue}
\n\n
\n );\n};\n\nexport default UserList;\n\n1⃣Использование map() \n{users.map(user => (\n User List
\n- \n {users.map(user => (\n
- \n {user.name} - {user.age} years old\n \n ))}\n
\n
\n );\n};\n\nconst UserList = () => {\n return (\n {user.name}
\nAge: {user.age}
\nEmail: {user.email}
\n\n
\n );\n};\n\nexport default UserList;\n\n1⃣Создание компонента для элемента списка \nconst UserItem = ({ user }) => {\n return (\n User List
\n {users.map(user => (\n\n
\n );\n}; \n\n2⃣Использование компонента внутри map() \n{users.map(user => (\n {user.name}
\nAge: {user.age}
\nEmail: {user.email}
\n\n
\n );\n }\n}\n\n🟠Функция как аргумент\nИспользование функции вместо объекта рекомендуется, когда новое состояние зависит от предыдущего состояния, чтобы избежать потенциальных проблем с асинхронностью.\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n incrementCount = () => {\n this.setState((prevState, props) => ({\n count: prevState.count + 1\n }));\n }\n render() {\n return (\n Count: {this.state.count}
\n \n\n
\n );\n }\n}\n\n🟠Колбэк-функция\nВторой аргумент setState() — это колбэк, который вызывается после того, как состояние было обновлено и компонент перерисован.\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n incrementCount = () => {\n this.setState({ count: this.state.count + 1 }, () => {\n console.log('Состояние обновлено:', this.state.count);\n });\n }\n render() {\n return (\n Count: {this.state.count}
\n \n\n
\n );\n }\n}\n\n🚩Важные замечания\n\n🟠Не изменяйте состояние напрямую\nИзменение состояния напрямую (например, this.state.count = 1) не вызовет перерисовку компонента. Всегда используйте setState().\n🟠Batching (группировка)\nReact может группировать несколько вызовов setState() для повышения производительности. Поэтому состояние может быть обновлено асинхронно.\n🟠Компоненты-классы и хуки\nВ функциональных компонентах для управления состоянием используются хуки, такие как useState. setState() используется только в компонентах-классах.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-12-21T09:10:12Z","dateModified":"2024-12-21T09:10:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3463},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}}]}Count: {this.state.count}
\n \n
🤔 Отслеживаемые свойства, что такое, как использовать?
В контексте разработки приложений, отслеживаемые свойства (observable properties) относятся к свойствам объектов, изменения которых можно отслеживать. Это полезно для автоматического обновления пользовательского интерфейса или выполнения других действий при изменении данных. В JavaScript для реализации отслеживаемых свойств часто используются библиотеки, такие как MobX, или встроенные механизмы, такие как Proxy.
🚩Использование Proxy для отслеживания свойств
Встроенный объект
Proxy в JavaScript позволяет перехватывать и настраивать операции, выполняемые с объектом, такие как чтение и запись свойств.
const handler = {
get(target, property) {
console.log(`Getting value of ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Setting value of ${property} to ${value}`);
target[property] = value;
return true;
}
};
const person = {
name: 'Alice',
age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bobnpm install mobx mobx-reactimport { observable, autorun } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import ReactDOM from 'react-dom';
const appState = observable({
count: 0,
increment() {
this.count++;
}
});
autorun(() => {
console.log(`Count: ${appState.count}`);
});
appState.increment(); // Count: 1
appState.increment(); // Count: 2
const Counter = observer(() => (
<div>
<p>Count: {appState.count}</p>
<button onClick={() => appState.increment()}>Increment</button>
</div>
));
ReactDOM.render(<Counter />, document.getElementById('root'));const handler = {
set(target, property, value) {
console.log(`Setting value of ${property} to ${value}`);
target[property] = value;
document.getElementById(property).innerText = value;
return true;
}
};
const state = {
count: 0
};
const proxyState = new Proxy(state, handler);
document.getElementById('increment').addEventListener('click', () => {
proxyState.count++;
});
<div>
<p id="count">0</p>
<button id="increment">Increment</button>
</div>
<script src="path/to/your/script.js"></script>🤔 Зачем нам нужен менеджер состояния?
Менеджер состояния используется для централизованного управления данными в приложении. Это упрощает обмен данными между компонентами, делает состояние приложения предсказуемым и упрощает отладку. Например, Vuex или Redux помогают управлять состоянием в сложных приложениях.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Вычисляемые свойства, что такое, как использовать?
Это функция в JavaScript, которая позволяет использовать выражения в качестве имен свойств объекта. Это особенно полезно, когда имя свойства динамически вычисляется или создается на основе переменной.
🚩Синтаксис
Вычисляемые свойства в объектных литералах задаются в квадратных скобках
[].
let propName = 'name';
let person = {
[propName]: 'Alice'
};
console.log(person.name); // 'Alice'let key = 'age';
let person = {
name: 'Alice',
[key]: 25
};
console.log(person.name); // 'Alice'
console.log(person.age); // 25let i = 0;
let obj = {
['prop_' + ++i]: i,
['prop_' + ++i]: i,
['prop_' + ++i]: i
};
console.log(obj); // { prop_1: 1, prop_2: 2, prop_3: 3 }let prefix = 'user';
let index = 1;
let users = {
[prefix + index]: { name: 'Alice' },
[prefix + (index + 1)]: { name: 'Bob' }
};
console.log(users.user1.name); // 'Alice'
console.log(users.user2.name); // 'Bob'function createKey(base, index) {
return base + index;
}
let obj = {
[createKey('key', 1)]: 'value1',
[createKey('key', 2)]: 'value2'
};
console.log(obj.key1); // 'value1'
console.log(obj.key2); // 'value2'let studentName1 = 'Alice';
let studentName2 = 'Bob';
let grades = {
[studentName1]: 85,
[studentName2]: 92
};
console.log(grades.Alice); // 85
console.log(grades.Bob); // 92function getFilterKey(filterName) {
return `filter_${filterName}`;
}
let filters = {};
filters[getFilterKey('age')] = 25;
filters[getFilterKey('location')] = 'New York';
console.log(filters); // { filter_age: 25, filter_location: 'New York' }🤔 Что такое CORS?
CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет или запрещает доступ к ресурсам с одного домена другим доменам. Он необходим, чтобы браузеры контролировали запросы, отправляемые с одного источника (origin) на другой, и защищали приложения от нежелательного обмена данными.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Что такое экшн, и как изменить состояние?
Это объект, который отправляется в хранилище (store) и содержит информацию о том, что произошло. Экшны являются единственным источником информации для хранилища, которое использует их для определения, как изменить текущее состояние.
🚩Структура экшна
Это простой объект JavaScript, который должен содержать, по крайней мере, одно свойство
type, указывающее тип экшна. Дополнительно могут быть добавлены другие свойства для передачи данных.
const incrementAction = {
type: 'INCREMENT'
};
const addTodoAction = {
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Learn Redux'
}
};const increment = () => {
return {
type: 'INCREMENT'
};
};
const addTodo = (id, text) => {
return {
type: 'ADD_TODO',
payload: {
id,
text
}
};
};const initialState = {
count: 0,
todos: []
};
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1
};
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, action.payload]
};
default:
return state;
}
};npm install redux react-reduximport { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
); const incrementAction = { type: 'INCREMENT' };
const addTodoAction = {
type: 'ADD_TODO',
payload: { id: 1, text: 'Learn Redux' }
}; const increment = () => ({ type: 'INCREMENT' });
const addTodo = (id, text) => ({
type: 'ADD_TODO',
payload: { id, text }
}); const rootReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'ADD_TODO':
return { ...state, todos: [...state.todos, action.payload] };
default:
return state;
}
};🤔 Какими способами можно скрыть элемент?
1. display: none; — элемент удаляется из визуального потока страницы.
2. visibility: hidden; — элемент остаётся на странице, но становится невидимым.
3. opacity: 0; — элемент остаётся видимым для событий, но становится прозрачным.
4. С помощью JavaScript: удаление элемента (removeChild) или добавление атрибута hidden.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Что такое редьюсер, и какие параметры он принимает?
В контексте JavaScript, редьюсер (reducer) — это функция, которая принимает текущее состояние и действие, а затем возвращает новое состояние. Редьюсеры широко используются в библиотеке Redux для управления состоянием приложения.
🚩Основная концепция
1⃣Принимает два аргумента
Текущее состояние (
state)
Действие (action)
2⃣Возвращает новое состояние.
const reducer = (state, action) => {
switch (action.type) {
case 'ACTION_TYPE':
// Возвращаем новое состояние
return {
...state,
// Обновляем определенные свойства
};
default:
return state;
}
};const initialState = {
count: 0
};const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1
};
case 'DECREMENT':
return {
...state,
count: state.count - 1
};
default:
return state;
}
};useReducer для управления состоянием с помощью редьюсера в функциональных компонентах.
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const counterReducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(counterReducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
};
export default Counter;🤔 Какой метод используется для сравнения объектов на равенство в Java?
📌 Как отследить демонтирование функционального компонента?
💬 Спрашивают в 6% собеседований
В функциональных компонентах React можно отслеживать демонтирование компонента с помощью хука
useEffect. Когда компонент демонтируется, React вызывает функцию очистки, которую можно определить внутри useEffect.
🤔 Использование `useEffect` для отслеживания демонтирования
Хук useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Функция очистки, возвращаемая из useEffect, выполняется при демонтировании компонента.
🤔 Пример использования
import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
console.log('Component mounted');
// Функция очистки вызывается при демонтировании компонента
return () => {
console.log('Component will unmount');
};
}, []); // Пустой массив зависимостей означает, что эффект выполнится только при монтировании и демонтировании
return (
<div>
<p>My Component</p>
</div>
);
};
export default MyComponent; useEffect(() => {
console.log('Component mounted');
return () => {
console.log('Component will unmount');
};
}, []);
import React, { useEffect, useState } from 'react';
const WebSocketComponent = () => {
const [messages, setMessages] = useState([]);
useEffect(() => {
const socket = new WebSocket('ws://example.com/socket');
socket.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
console.log('WebSocket connection opened');
return () => {
socket.close();
console.log('WebSocket connection closed');
};
}, []);
return (
<div>
<h1>WebSocket Messages</h1>
<ul>
{messages.map((message, index) => (
<li key={index}>{message}</li>
))}
</ul>
</div>
);
};
export default WebSocketComponent; const socket = new WebSocket('ws://example.com/socket');
socket.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
return () => {
socket.close();
console.log('WebSocket connection closed');
};
useEffect. Это полезно для выполнения операций очистки, таких как закрытие соединений, отмена подписок или освобождение ресурсов.
Короче говоря: Используйте хук useEffect с функцией очистки, чтобы отслеживать демонтирование функционального компонента и выполнять необходимые операции очистки.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовых🤔 Что такое псевдоэлемент?
Псевдоэлемент — это CSS-конструкция, которая позволяет стилизовать определённые части элемента, например, ::before для добавления контента перед элементом или ::after для добавления после. Это удобно для оформления, не изменяя HTML-структуру.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Какие основные реакт хуки знаешь и используешь?
React предоставляет несколько основных хуков (hooks), которые позволяют использовать состояние и другие возможности React в функциональных компонентах.
🟠useState
useState позволяет добавить состояние в функциональный компонент.
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;useContext позволяет использовать контекст для передачи данных через дерево компонентов без необходимости передавать пропсы на промежуточных уровнях.
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
The current theme is {theme}
</div>;
};
const App = () => {
return (
<ThemeContext.Provider value="dark">
<ThemedComponent />
</ThemeContext.Provider>
);
};
export default App;useReducer — это альтернатива useState для управления более сложным состоянием в компоненте.
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export default Counter;useRef возвращает изменяемый объект-реф, который сохраняется при повторных рендерах компонента. Это часто используется для доступа к DOM-элементам или для сохранения переменных, которые не вызывают повторный рендер при изменении.
import React, { useRef } from 'react';
const TextInputWithFocusButton = () => {
const inputEl = useRef(null);
const onButtonClick = () => {
// "current" указывает на смонтированный элемент input
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
};
export default TextInputWithFocusButton;🤔 Что такое IIFE?
IIFE (Immediately Invoked Function Expression) — это функция в JavaScript, которая вызывается сразу после определения. Она используется для создания изолированного пространства имён, чтобы избежать конфликтов в глобальной области видимости.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 В чём отличие между контролируемыми и неконтролируемыми объектами?
В React различают два типа компонентов для обработки пользовательского ввода: контролируемые (controlled) и неконтролируемые (uncontrolled) компоненты. Понимание их различий важно для выбора подходящего способа управления состоянием формы.
🚩Контролируемые компоненты
Контролируемый компонент управляет своим состоянием через React. Это означает, что состояние элемента формы (например, значение текстового поля) хранится в состоянии (state) компонента и обновляется через React.
import React, { useState } from 'react';
const ControlledComponent = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<div>
<label>
Name:
<input type="text" value={inputValue} onChange={handleChange} />
</label>
<p>Current value: {inputValue}</p>
</div>
);
};
export default ControlledComponent;onChange) и обновляют состояние компонента.
🟠Односторонний поток данных
Данные идут от состояния компонента к элементу формы, обеспечивая контроль над значением.
🚩Неконтролируемые компоненты
Неконтролируемый компонент управляет своим состоянием через DOM. Значение элемента формы извлекается непосредственно из DOM, а не из состояния компонента.
import React, { useRef } from 'react';
const UncontrolledComponent = () => {
const inputRef = useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
alert('Submitted value: ' + inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={inputRef} />
</label>
<button type="submit">Submit</button>
</form>
);
};
export default UncontrolledComponent;useRef).
🟠Двусторонний поток данных
Данные могут быть извлечены из DOM в любой момент времени, что делает управление состоянием менее очевидным.
Ставь 👍 и забирай 📚 Базу знаний🤔 Использование хука useEffect в React
- useEffect позволяет выполнять побочные эффекты в функциональных компонентах React.
- Хук может заменить методы жизненного цикла классовых компонентов для выполнения кода после каждого рендеринга.
- Принимает функцию эффекта и массив зависимостей, указывая, при изменении каких пропсов или состояний должен выполняться эффект.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
📺 Уникальная база записей IT собеседований
300+ записей реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы.
Записи собесов от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д.
🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!
У тебя есть запись собеседования? Мы готовы ее купить и заплатим до 3000 руб. за каждую
Миграция в облако? Это легко!
Собственная инфраструктура устарела или не справляется с нагрузками? Используйте облачные ресурсы! Эксперты Yandex Cloud помогут перейти в облако быстро, легко и безопасно.
✅ Мы полностью сопровождаем процесс.
✅ От вас — только инженер с доступом к инфраструктуре.
✅ Архитектура под ваши задачи, миграция и поддержка на каждом шагу — всё включено.
⚡Переходите в Yandex Cloud и забудьте о старом железе. А если успеете подать заявку до 31 декабря, мы покроем расходы на инженеров и тестовую инфраструктуру.
Подать заявку
#реклама 16+
yandex.cloud
О рекламодателе
Реклама на Яндексе
🤔 Как отрисовать массив элементов?
В React для отрисовки массива элементов используется метод
map(), который позволяет перебрать массив и вернуть JSX для каждого элемента. Это удобный и декларативный способ создания списков элементов.
🚩Пример использования `map()` для отрисовки массива
import React from 'react';
const users = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 }
];
const UserList = () => {
return (
<div>
<h1>User List</h1>
<ul>
{users.map(user => (
<li key={user.id}>
{user.name} - {user.age} years old
</li>
))}
</ul>
</div>
);
};
export default UserList;map()
{users.map(user => (
<li key={user.id}>
{user.name} - {user.age} years old
</li>
))} key
<li key={user.id}> map().
import React from 'react';
const users = [
{ id: 1, name: 'Alice', age: 25, email: 'alice@example.com' },
{ id: 2, name: 'Bob', age: 30, email: 'bob@example.com' },
{ id: 3, name: 'Charlie', age: 35, email: 'charlie@example.com' }
];
const UserItem = ({ user }) => {
return (
<div className="user-item">
<h2>{user.name}</h2>
<p>Age: {user.age}</p>
<p>Email: {user.email}</p>
</div>
);
};
const UserList = () => {
return (
<div>
<h1>User List</h1>
{users.map(user => (
<UserItem key={user.id} user={user} />
))}
</div>
);
};
export default UserList;const UserItem = ({ user }) => {
return (
<div className="user-item">
<h2>{user.name}</h2>
<p>Age: {user.age}</p>
<p>Email: {user.email}</p>
</div>
);
}; map()
{users.map(user => (
<UserItem key={user.id} user={user} />
))} 🤔 Что такое семантика в веб-разработке
- Семантика в HTML относится к использованию HTML-тегов в соответствии с их назначением для повышения доступности и поисковой оптимизации.
- Семантически корректная верстка помогает устройствам чтения с экрана и поисковым системам лучше понимать структуру и содержание веб-страницы.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
+5
Надежная IT-инфраструктура для бизнеса от Selectel.
Комплексные IaaS-решения для всех уровней бизнеса.
- Выделенные серверы
- Облачные серверы
- Объектное хранилище
- Мобильная ферма
- DBaaS и Managed Kubernetes
- 1С в облаке
Перейти на сайт
#реклама 16+
selectel.ru
О рекламодателе
🤔 Что делает setstate()?
Это метод в React, который используется для обновления состояния компонента. Когда состояние компонента изменяется, React запускает процесс обновления (рендеринга) компонента и всех его дочерних компонентов, чтобы отобразить актуальные данные.
🚩Основные концепции
🟠АсинхронностьВызов
setState() может быть асинхронным. Это означает, что состояние компонента не обязательно будет обновлено сразу после вызова setState(). Вместо этого, React может сгруппировать несколько вызовов setState() для оптимизации производительности.
🟠Мерджинг состояния
При вызове setState() React сливает (мерджит) новый объект состояния с текущим состоянием. Это позволяет обновлять только те части состояния, которые изменились, без перезаписи всего состояния.
🚩Синтаксис
🟠Первый аргумент
Может быть объектом или функцией. Объект: Новый фрагмент состояния, который нужно объединить с текущим состоянием Функция: Функция, которая принимает текущее состояние и пропсы и возвращает новый фрагмент состояния.
🟠Второй аргумент (необязательный)
Колбэк-функция, которая будет вызвана после того, как состояние обновится и компонент перерисуется.
🚩Примеры использования
Объект как аргумент
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState((prevState, props) => ({
count: prevState.count + 1
}));
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}setState() — это колбэк, который вызывается после того, как состояние было обновлено и компонент перерисован.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({ count: this.state.count + 1 }, () => {
console.log('Состояние обновлено:', this.state.count);
});
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}this.state.count = 1) не вызовет перерисовку компонента. Всегда используйте setState().
🟠Batching (группировка)
React может группировать несколько вызовов setState() для повышения производительности. Поэтому состояние может быть обновлено асинхронно.
🟠Компоненты-классы и хуки
В функциональных компонентах для управления состоянием используются хуки, такие как useState. setState() используется только в компонентах-классах.
Ставь 👍 и забирай 📚 Базу знаний