Вопросы React Frontend Developer

• display: none полностью удаляет элемент с веб-страницы, как если бы его не существовало. Он не занимает места в макете, и элементы после него сдвигаются, чтобы занять его пространство.

• visibility: hidden скрывает элемент, но оставляет его место на странице. Элемент всё ещё занимает пространство в макете, но не виден пользователю.

this в JavaScript — это ключевое слово, которое ссылается на текущий контекст выполнения. Контекст зависит от того, где и как используется this:

• В методе объекта this указывает на этот объект.

• В функции this по умолчанию указывает на глобальный объект (в строгом режиме — undefined).

• В стрелочных функциях this наследуется из внешнего контекста.

Пример:

const obj = {
	name: "Иван",
	greet() {
		console.log(`Привет, ${this.name}!`);
	},
};
obj.greet(); // Привет, Иван!

Прототип — это объект, от которого другой объект может наследовать свойства и методы. В JavaScript каждый объект имеет скрытое свойство [[Prototype]], которое указывает на его прототип. Это позволяет организовать наследование, чтобы не дублировать код и переиспользовать общие методы. Например, если метод не найден в объекте, JavaScript ищет его в прототипе.

Пример:

const animal = { eats: true };
const dog = Object.create(animal);
console.log(dog.eats); // true

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

Пример:

document.getElementById("parent").addEventListener("click", (event) => {
	if (event.target.tagName === "BUTTON") {
		console.log(`Нажата кнопка: ${event.target.textContent}`);
	}
});

JSX (JavaScript XML) — это расширение синтаксиса JavaScript, которое позволяет писать HTML-подобный код прямо в JavaScript. Он используется в React для описания того, как должен выглядеть интерфейс. JSX упрощает создание компонентов, объединяя разметку и логику в одном месте.

Пример:

const element = <h1>Привет, мир!</h1>;

Под капотом JSX преобразуется в вызовы функций, например:

React.createElement('h1', null, 'Привет, мир!');

Prop drilling — это процесс передачи данных от родительского компонента к дочерним через "пропсы", даже если промежуточные компоненты не используют эти данные. Это может усложнить код, особенно при глубокой вложенности компонентов. Проблему prop drilling можно решить, используя такие подходы, как Context API или библиотеки управления состоянием (например, Redux).

Пример:

function App() {
	return <Parent data="Привет" />;
}
function Parent({ data }) {
	return <Child data={data} />;
}
function Child({ data }) {
	return <Grandchild data={data} />;
}
function Grandchild({ data }) {
	return <h1>{data}</h1>;
}