Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
@easy_javascript_ru
Номер заявления: № 4982734881
+7 921 632 6117
Реклама: @easyoffer_adv
Решай тесты - t.me/+T0COHtFzCJkwMDUy
Нарешивай задачи - t.me/+_tcX2w2EmvdmMTgy
Ищи работу - t.me/+CgCAzIyGHHg0Nzky
Frontend | Вопросы собесов (Russian)
Высоко цените свое время и стремитесь успешно пройти собеседование по Frontend разработке? Тогда канал @easy_javascript_ru идеально подойдет для вас! Здесь собраны самые актуальные и интересные вопросы, которые могут встретиться на собеседованиях по Frontend. Уникальный контент поможет вам подготовиться к собеседованию и повысить свои шансы на успешное трудоустройство в сфере Frontend разработки. Не теряйте времени зря, присоединяйтесь к каналу, чтобы стать настоящим профессионалом в своей области! Для получения более подробной информации по вопросам рекламы обращайтесь к администратору по контактному номеру +7 921 632 6117. Также вы можете использовать специальные тесты и задачи для тренировки в каналах t.me/+T0COHtFzCJkwMDUy и t.me/+_tcX2w2EmvdmMTgy соответственно. Не упустите свой шанс найти лучшую работу в сфере Frontend разработки - переходите по ссылке t.me/+CgCAzIyGHHg0Nzky и начинайте свой успешный карьерный путь прямо сейчас!
Frontend | Вопросы собесов
08 Jan, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
08 Jan, 09:10
Событие, которое срабатывает при потере фокуса элементом формы, называется
blur.Событие
blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле.Автоматическое сохранение введенных данных при переходе на другой элемент формы.
Скрытие вспомогательной информации (например, подсказок) при уходе с элемента.
blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы.blur срабатывает, когда элемент теряет фокус, то есть пользователь:Кликнул на другой элемент.
Нажал клавишу Tab, чтобы перейти на следующий элемент.
В отличие от события
focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом.Событие можно обрабатывать с помощью:
1. HTML-атрибутов (например,
onblur).2. JavaScript через метод
addEventListener.Пример на практике
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример blur</title>
<script>
function validateInput(event) {
const input = event.target;
if (input.value.trim() === "") {
alert("Поле не должно быть пустым!");
}
}
document.addEventListener("DOMContentLoaded", () => {
const inputElement = document.getElementById("name");
inputElement.addEventListener("blur", validateInput);
});
</script>
</head>
<body>
<form>
<label for="name">Введите имя:</label>
<input type="text" id="name" name="name" />
<button type="submit">Отправить</button>
</form>
</body>
</html>
Событие
blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.// Работает только для конкретного элемента
element.addEventListener("blur", handler);
// Для делегирования используют focusout
parentElement.addEventListener("focusout", handler);
Событие
change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
07 Jan, 16:10
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
07 Jan, 09:10
Селекторы перенаследуются в CSS для того, чтобы упростить иерархию стилей и избежать избыточного кода. Перенаследование позволяет дочерним элементам автоматически применять стили, заданные для родительских элементов, если не указано иначе. Это помогает поддерживать консистентность дизайна и упрощает управление стилями.
<div class="parent">
<p>Текст в параграфе.</p>
<div class="child">
<p>Другой текст в параграфе.</p>
</div>
</div>
И CSS
.parent p {
color: blue;
font-size: 16px;
}
.child p {
font-size: 14px;
}Позволяет избегать дублирования стилей, что делает код более чистым и легким для понимания.
Изменяя стиль родительского элемента, можно автоматически изменить стиль всех дочерних элементов, что облегчает поддержку и модификацию дизайна.
Обеспечивает единообразие стилей на всем сайте, так как дочерние элементы наследуют стили от родительских.
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
07 Jan, 07:00
Как легко прокачать навыки верстки и найти работу?
Присоединяйся к каналам опытного верстальщика:
2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе.
2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду
Научись и зарабатывай на верстке!
Присоединяйся к каналам опытного верстальщика:
2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе.
2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду
Научись и зарабатывай на верстке!
Frontend | Вопросы собесов
06 Jan, 16:10
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
06 Jan, 09:10
Это инструменты, которые помогают разработчикам находить и устранять ошибки, улучшать стиль кода и обеспечивать соответствие кода определенным стандартам. Самый популярный линтер для JavaScript — это ESLint.
Убедитесь, что у вас установлены Node.js и npm (Node Package Manager). Их можно скачать и установить с [официального сайта Node.js].
Если у вас еще нет проекта, создайте новый с помощью команды:
npm init -y
Установите ESLint как dev-зависимость
npm install eslint --save-dev
Запустите команду для создания файла конфигурации
.eslintrc: npx eslint --init
Чтобы проверить ваш код с помощью ESLint, используйте команду
npx eslint имя_файла.js
Например, если у вас есть файл
app.js, выполнитеnpx eslint app.js
ESLint может автоматически исправлять некоторые типы ошибок. Используйте флаг
--fix, чтобы исправить ошибки, которые можно исправить автоматически:npx eslint имя_файла.js --fix
Вы можете линтить все файлы в проекте, добавив скрипт в
package.json. Откройте package.json и добавьте следующий скрипт в раздел "scripts":"scripts": {
"lint": "eslint ."
} Теперь вы можете запускать линтер для всего проекта с помощью команды
npm run lint
Приведем пример базовой конфигурации для проекта, не использующего фреймворки
{
"env": {
"browser": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"indent": ["error", 4],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
05 Jan, 16:10
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
05 Jan, 09:10
В React обращаться к DOM-дереву можно несколькими способами, в зависимости от задач. Основные подходы включают использование рефов (refs) и манипуляции с элементами через стандартные методы JavaScript.
Рефы позволяют получить доступ к DOM-элементам напрямую. Это особенно полезно для управления фокусом, проигрывания медиа или интеграции с библиотеками сторонних разработчиков.
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
// Получаем доступ к DOM-элементу через реф
this.myRef.current.focus();
}
render() {
return <input type="text" ref={this.myRef} />;
}
}
export default MyComponent;Пример с использованием функционального компонента и хуков
import React, { useRef, useEffect } from 'react';
const MyComponent = () => {
const myRef = useRef(null);
useEffect(() => {
// Получаем доступ к DOM-элементу через реф
myRef.current.focus();
}, []);
return <input type="text" ref={myRef} />;
};
export default MyComponent;Иногда нужно обращаться к DOM-элементам, используя стандартные методы, такие как
document.getElementById или document.querySelector. Это не рекомендуется, так как это противоречит философии React по работе с виртуальным DOM, но может быть полезно в некоторых случаях.import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
const element = document.getElementById('my-element');
element.style.color = 'red';
}, []);
return <div id="my-element">Hello, world!</div>;
};
export default MyComponent;React предлагает несколько хуков, которые могут быть использованы для управления жизненным циклом компонентов и обращения к DOM-элементам.
useEffect: Хук для выполнения побочных эффектов.
useLayoutEffect: Похож на useEffect, но выполняется синхронно после всех изменений DOM.
import React, { useRef, useLayoutEffect } from 'react';
const MyComponent = () => {
const myRef = useRef(null);
useLayoutEffect(() => {
// Получаем доступ к DOM-элементу через реф
myRef.current.style.color = 'blue';
}, []);
return <div ref={myRef}>Hello, world!</div>;
};
export default MyComponent;Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
04 Jan, 16:10
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
04 Jan, 09:10
Когда микрозадача (microtask) создаёт другую микрозадачу, обе задачи будут выполнены в том же цикле событий (event loop), прежде чем будет обработано следующее макрозадача (macrotask).
Например, обработчики событий, setTimeout, setInterval.
Например, Promises, MutationObserver, process.nextTick (в Node.js).
console.log('Start');
setTimeout(() => {
console.log('Macrotask: setTimeout');
}, 0);
Promise.resolve()
.then(() => {
console.log('Microtask 1');
Promise.resolve().then(() => {
console.log('Microtask 2');
});
})
.then(() => {
console.log('Microtask 3');
});
console.log('End');console.log('Start') Выполняется сразу.
console.log('End')Выполняется сразу после первого console.log.
Очередь макрозадач ставит функцию из
setTimeout.Очередь микрозадач добавляет первую микрозадачу из
Promise.resolve().then(...).Вывод в консоли
Start
End
Microtask 1
Microtask 2
Microtask 3
Macrotask: setTimeout
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
03 Jan, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
03 Jan, 09:10
Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя.
Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один.
Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов.
На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx.
Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.
Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов.
Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов.
Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic.
Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку.
Размер файлов: Это замедляет загрузку и увеличивает потребление трафика пользователем.
Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки.
Отсутствие кэширования: Увеличивает время загрузки для повторных посещений.
JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами.
Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах.
Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью.
Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства.
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
02 Jan, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
02 Jan, 09:10
В JavaScript существует несколько способов выполнения асинхронных операций. Основные из них включают коллбеки (callbacks), промисы (promises) и async/await.
Коллбеки были первым способом выполнения асинхронных операций в JavaScript. Это функции, которые передаются другим функциям в качестве аргументов и вызываются после завершения асинхронной операции.
function fetchData(callback) {
setTimeout(() => {
const data = "some data";
callback(data);
}, 1000);
}
fetchData((result) => {
console.log(result);
});Почему это нужно: Коллбеки позволяют выполнять код после завершения асинхронной задачи, например, загрузки данных с сервера. Как используется: Передаем функцию в качестве аргумента и вызываем её, когда данные готовы. Почему так: Это простой способ передать управление после завершения асинхронной операции, но может привести к "аду коллбеков" (callback hell) при множественных вложенных вызовах.
Промисы были введены для упрощения работы с асинхронным кодом и для решения проблемы вложенности, характерной для коллбеков. Промис представляет собой объект, который может находиться в одном из трёх состояний: ожидание (pending), выполнено (fulfilled) или отклонено (rejected).
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = "some data";
resolve(data);
}, 1000);
});
}
fetchData().then((result) => {
console.log(result);
}).catch((error) => {
console.error(error);
});Почему это нужно: Промисы делают код более читаемым и управляемым, особенно при наличии цепочек асинхронных операций. Как используется: Создаем новый промис и возвращаем его из функции. Затем используем методы then и catch для обработки результата или ошибки. Почему так: Промисы позволяют избежать вложенности и обеспечивают более линейный и понятный поток выполнения.
Это синтаксический сахар поверх промисов, который делает код ещё более читаемым и похожим на синхронный.
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
const data = "some data";
resolve(data);
}, 1000);
});
}
async function main() {
try {
const result = await fetchData();
console.log(result);
} catch (error) {
console.error(error);
}
}
main();Почему это нужно: async/await упрощает написание и чтение асинхронного кода, устраняя необходимость использования методов then и catch. Как используется: Объявляем функцию с ключевым словом async и используем await для ожидания завершения промиса. Почему так: async/await делает асинхронный код более похожим на синхронный, улучшая его читаемость и поддержку.
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
01 Jan, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
01 Jan, 09:10
Значения свойства
box-sizing в CSS определяют, как учитываются отступы (padding) и рамки (border) при расчете размера элемента (width и height). Это влияет на окончательные размеры и внешний вид элемента на странице.Это значение по умолчанию для всех элементов. Когда вы устанавливаете размеры элемента с
box-sizing: content-box, ширина и высота элемента включают только содержимое (content), но не включают отступы и рамки..element {
box-sizing: content-box; /* значение по умолчанию */
width: 200px;
padding: 20px;
border: 10px solid black;
}200px (содержимое) + 20px (отступ слева) + 20px (отступ справа) + 10px (рамка слева) + 10px (рамка справа) = 260px.
аналогично рассчитывается с учетом отступов и рамок сверху и снизу.
При использовании значения
border-box, размеры элемента (width и height) включают содержимое, отступы и рамки. Это делает расчет размеров более простым и предсказуемым..element {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 10px solid black;
}200px уже включает отступы и рамки, то есть фактическая ширина содержимого будет 140px (200px - 20px (отступ слева) - 20px (отступ справа) - 10px (рамка слева) - 10px (рамка справа)).
аналогично, высота включает отступы и рамки.
HTML
<div class="content-box">Content-box</div>
<div class="border-box">Border-box</div>
CSS
div {
margin: 10px;
padding: 20px;
border: 10px solid black;
}
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
}
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
}Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
31 Dec, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
31 Dec, 09:10
Оптимизация сайта включает в себя несколько стратегий и техник, направленных на улучшение производительности, скорости загрузки и пользовательского опыта.
Используйте инструменты для сжатия изображений (например, TinyPNG, ImageOptim) без значительной потери качества. Используйте современные форматы изображений, такие как WebP, которые обеспечивают лучшее сжатие по сравнению с JPEG и PNG. Загружайте изображения по мере их появления в области видимости пользователя (атрибут
loading="lazy" в HTML).Уменьшите размер CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS, CSSNano, HTMLMinifier. Сократите количество HTTP-запросов, объединив несколько CSS или JavaScript файлов в один.
Храните копии вашего сайта на серверах по всему миру, чтобы уменьшить время загрузки для пользователей из разных регионов.
Настройте заголовки кэширования HTTP, чтобы браузеры могли хранить копии статических ресурсов (CSS, JavaScript, изображения). Используйте технологии, такие как Varnish или Nginx, для кэширования страниц на сервере.
Используйте атрибуты
async и defer для асинхронной загрузки JavaScript, чтобы не блокировать рендеринг страницы. Встраивайте критические стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.Включите сжатие gzip или Brotli на сервере для уменьшения размера передаваемых данных. Переход на HTTP/2, который поддерживает мультиплексирование запросов, позволяет загружать несколько ресурсов одновременно через одно соединение.
Используйте Service Workers для создания прогрессивных веб-приложений (PWA), обеспечивающих офлайн-работу и улучшенное кэширование. Используйте техники предзагрузки (preload) и предзапросов (prefetch) для ресурсов, которые понадобятся в ближайшее время.
Используйте Google Lighthouse, PageSpeed Insights и WebPageTest для анализа производительности и поиска узких мест. Применяйте сервисы, такие как Google Analytics, New Relic, для отслеживания реальной производительности и пользовательского опыта.
<img src="example.jpg" loading="lazy" alt="Пример изображения">
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
30 Dec, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
30 Dec, 09:10
Чтобы отслеживать изменения свойств объекта в JavaScript, можно использовать несколько методов, каждый из которых подходит для различных случаев.
Proxy является мощным и гибким способом перехвата и настройки операций с объектами, включая чтение и запись свойств.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 // BobObject.defineProperty позволяет определить новое или изменить существующее свойство непосредственно на объекте, позволяя добавить геттеры и сеттеры для отслеживания изменений.const person = {
_name: 'Alice',
_age: 25
};
Object.defineProperty(person, 'name', {
get() {
console.log('Getting name');
return this._name;
},
set(value) {
console.log(`Setting name to ${value}`);
this._name = value;
}
});
Object.defineProperty(person, 'age', {
get() {
console.log('Getting age');
return this._age;
},
set(value) {
console.log(`Setting age to ${value}`);
this._age = value;
}
});
person.name = 'Bob'; // Setting name to Bob
console.log(person.name); // Getting name // Bob
person.age = 30; // Setting age to 30
console.log(person.age); // Getting age // 30MobX — это библиотека для управления состоянием, которая делает состояния наблюдаемыми и автоматически синхронизирует их с пользовательским интерфейсом.
import { observable, autorun } from 'mobx';
const person = observable({
name: 'Alice',
age: 25,
setName(name) {
this.name = name;
},
setAge(age) {
this.age = age;
}
});
// Автоматически вызываемая функция при изменении наблюдаемого состояния
autorun(() => {
console.log(`Name: ${person.name}, Age: ${person.age}`);
});
person.setName('Bob'); // Name: Bob, Age: 25
person.setAge(30); // Name: Bob, Age: 30Для отслеживания изменений в DOM можно использовать
MutationObserver. Это не напрямую связано с объектами, но полезно для отслеживания изменений в элементах DOM.const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
targetNode.setAttribute('data-test', 'value');Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
29 Dec, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
29 Dec, 09:10
В контексте разработки приложений, отслеживаемые свойства (observable properties) относятся к свойствам объектов, изменения которых можно отслеживать. Это полезно для автоматического обновления пользовательского интерфейса или выполнения других действий при изменении данных. В JavaScript для реализации отслеживаемых свойств часто используются библиотеки, такие как MobX, или встроенные механизмы, такие как 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 // BobЭто библиотека для управления состоянием, которая делает состояния наблюдаемыми и автоматически синхронизирует их с пользовательским интерфейсом.
npm install mobx mobx-react
import { 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'));Изменения данных автоматически отражаются в пользовательском интерфейсе.
Легче управлять состоянием и следить за его изменениями.
При правильной настройке обновляются только те части интерфейса, которые зависят от измененных данных.
Простой счетчик с использованием Proxy
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>
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
28 Dec, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
28 Dec, 09:10
Это функция в 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); // 25
let 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); // 92
Допустим, у вас есть объект, представляющий параметры фильтра для поиска, и вы хотите динамически создавать ключи на основе выбранных фильтров.
function 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' }Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
27 Dec, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
27 Dec, 09:10
Это объект, который отправляется в хранилище (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
}
};
};Чтобы изменить состояние в Redux, используется редьюсер. Редьюсер — это функция, которая принимает текущее состояние и экшн, а затем возвращает новое состояние.
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-redux
import { 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;
}
};Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
26 Dec, 16:10
2. visibility: hidden; — элемент остаётся на странице, но становится невидимым.
3. opacity: 0; — элемент остаётся видимым для событий, но становится прозрачным.
4. С помощью JavaScript: удаление элемента (removeChild) или добавление атрибута hidden.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
26 Dec, 09:10
В контексте JavaScript, редьюсер (reducer) — это функция, которая принимает текущее состояние и действие, а затем возвращает новое состояние. Редьюсеры широко используются в библиотеке Redux для управления состоянием приложения.
Текущее состояние (
state) Действие (
action)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;
}
};React предоставляет хук
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;Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
25 Dec, 09:10
В функциональных компонентах React можно отслеживать демонтирование компонента с помощью хука
useEffect. Когда компонент демонтируется, React вызывает функцию очистки, которую можно определить внутри 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 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;Открытие WebSocket соединения
const socket = new WebSocket('ws://example.com/socket'); Обработка входящих сообщений
socket.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
Закрытие WebSocket соединения при демонтировании
return () => {
socket.close();
console.log('WebSocket connection closed');
};
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
24 Dec, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
24 Dec, 09:10
React предоставляет несколько основных хуков (hooks), которые позволяют использовать состояние и другие возможности React в функциональных компонентах.
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;Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
23 Dec, 16:10
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
23 Dec, 09:10
В 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;Значение элемента формы хранится в самом DOM-элементе.
Для доступа к значению элемента используется реф (например, через
useRef).Данные могут быть извлечены из DOM в любой момент времени, что делает управление состоянием менее очевидным.
Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
22 Dec, 16:10
- Хук может заменить методы жизненного цикла классовых компонентов для выполнения кода после каждого рендеринга.
- Принимает функцию эффекта и массив зависимостей, указывая, при изменении каких пропсов или состояний должен выполняться эффект.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Frontend | Вопросы собесов
22 Dec, 09:10
В React для отрисовки массива элементов используется метод
map(), который позволяет перебрать массив и вернуть JSX для каждого элемента. Это удобный и декларативный способ создания списков элементов.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: '[email protected]' },
{ id: 2, name: 'Bob', age: 30, email: '[email protected]' },
{ id: 3, name: 'Charlie', age: 35, email: '[email protected]' }
];
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} />
))} Ставь 👍 и забирай 📚 Базу знаний
Frontend | Вопросы собесов
21 Dec, 16:10
- Семантически корректная верстка помогает устройствам чтения с экрана и поисковым системам лучше понимать структуру и содержание веб-страницы.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
18,645
subscribers
5
photos
1
videos
