Задачи по JS/CSS/HML

Вопрос на React собеседовании. Как получить доступ к элементу DOM? Ответ: Чтобы получить доступ к DOM-элементу в React, нужно создать ссылку на этот элемент. Это можно сделать с помощью функции React.createRef() или хука useRef(). После создания ссылки ее нужно присоединить к компоненту React, для которого нужно получить доступ к DOM, с помощью атрибута ref. Затем, чтобы получить доступ к самому элементу DOM, можно обратиться к созданной ссылке через ref.current: пример на картинке сверху. #react #собеседование

Вопрос на JavaScript собеседовании. Какова разница между == и ===? Ответ: Оператор равенства == выполняет принудительное приведение типа, что означает, что он попытается преобразовать операнды в один и тот же тип перед их сравнением. С другой стороны, оператор строгого равенства ===, не выполняет приведение типа. Он возвращает значение true только в том случае, если оба операнда имеют одинаковый тип и значение. Например:

console.log(1 == '1'); // true console.log(1 === '1'); // false

#js #собеседование

Вопрос на React собеседовании. Как отследить изменения поля объекта в функциональном компоненте? Ответ: Для этого необходимо использовать хук useEffect и передать поле объекта в виде массива зависимостей: пример на картинке сверху. #react #собеседование

Вопрос на JavaScript собеседовании. В чем разница между var, let и const? Ответ: 🔵var: Переменные, объявленные с помощью var, имеют функциональную область действия, что означает, что к ним можно получить доступ только в рамках функции, в которой они были объявлены. Внешняя переменная затеняется, когда переменная с тем же именем объявляется во вложенной функции. 🔵let: Пусть переменные имеют блочную область действия, что означает, что они доступны только в том блоке, в котором они объявлены. Объявление переменной с тем же именем во вложенном блоке приведет к затенению внешней переменной. 🔵const: переменные, объявленные с помощью const, также как let, имеют область действия блока, но их нельзя переназначить. Вот пример:

function example() { var x = 1; let y = 2; const z = 3; if (true) { var x = 4; let y = 5; const z = 6; } console.log(x); // 4 console.log(y); // 2 console.log(z); // 3 } example();

#js #собеседование

Вопрос на React собеседовании. Что такое фрагмент React? Ответ: Возврат нескольких элементов из компонента – обычная практика в React. Однако это может привести к созданию большого количества элементов в дереве виртуального DOM, отчего пострадает производительность приложения. Фрагменты React позволяют группировать несколько элементов внутри функции-компонента, избегая таким образом создания большого количества узлов в виртуальном DOM. Это улучшает производительность приложения и читаемость кода (пример на картинке сверху). Подробнее о фрагментах - здесь. #react #собеседование

Вопрос на JavaScript собеседовании. Что такое поднятие (hoisting) в JavaScript? Ответ: В JavaScript поднятие (hoisting) — это поведение, при котором переменные и объявления функций в памяти автоматически перемещаются в верхнюю часть своей области. Что это значит? Это означает, что эти переменные могут быть использованы до того, как они будут объявлены, и объявления функций также могут быть вызваны до их определения. #js #собеседование

Вопрос на React собеседовании. Что такое React.memo()? Ответ: React.memo() – это компонент высшего порядка, который используется для оптимизации производительности веб-приложений. Если компонент, который вы хотите оптимизировать, всегда отображает один и тот же результат с неизменными реквизитами (props), вы можете обернуть его вызов в React.memo, чтобы запомнить его результат. Таким образом, React может использовать последний отрендеренный результат этого компонента вместо того, чтобы снова его рендерить, если входные данные не изменились. Это помогает оптимизировать производительность, так как повторный рендеринг может быть затратным по ресурсам (пример на картинке сверху). Важно отметить, что React.memo влияет только на изменение входных данных (реквизитов): если функциональный компонент, обернутый в React.memo, использует useState, useReducer или useContext для изменения своего состояния или контекста, он все равно будет перерисован при изменении этих состояний или контекстов. Подробности в документации. #react #собеседование

Вопрос на JavaScript собеседовании. Как this работает в JavaScript? Ответ: this важное ключевое слово в JavaScript. Его значение определяется тем, как вызывается функция. Его можно задать явно с помощью call(), apply() или bind(). По умолчанию его значение внутри функции устанавливается в глобальный объект (в браузере это объект window), за исключением того, когда функция вызывается как метод объекта. В этом случае this указывает на объект, методом которого он является. #js #собеседование

Вопрос на React собеседовании. Для чего используется useContext и как он работает? Ответ: В типичном React-приложении данные передаются сверху вниз (от родительского компонента к дочернему) с помощью реквизитов (пропсов). Однако такой способ может оказаться слишком громоздким для некоторых типов реквизитов, которые нужно передавать многим компонентам – из-за языка или темы пользовательского интерфейса, например. Контекст предоставляет возможность обмена данными между компонентами без необходимости явной передачи реквизита через каждый уровень дерева. Компонент, вызывающий useContext, всегда будет перерисовываться при изменении значения контекста. Если перерисовка компонента требует больших затрат, можно оптимизировать ее с помощью мемоизации (картинка сверху). Подробности об использовании useContext в документации. #react #собеседование

Вопрос на JavaScript собеседовании. Что такое замыкание в JavaScript? Ответ: Замыкание — это функция, которая имеет доступ к переменным своей внешней функции. Это важно, потому что это позволяет внутренней функции «запоминать» переменные из своей внешней области, поэтому она может продолжать получать к ним доступ и манипулировать ими даже после того, как внешняя функция была завершена.

function outerFunction(x) { return function innerFunction(y) { return x + y; }; } const add5 = outerFunction(5); console.log(add5(3)); // 8

#js #собеседование