React Frontend Developer

Question 1

Как использовать keys?

Accepted Answer

Keys — это уникальные идентификаторы, которые React использует для того, чтобы отслеживать элементы при рендеринге списков. Они помогают React эффективно обновлять только те элементы, которые изменились, а не перерендеривать весь список. Ключи должны быть уникальными среди соседних элементов.

Question 2

Как создать компонент в React?

Accepted Answer

Чтобы создать компонент в React, достаточно написать функцию или класс, который возвращает JSX. Функциональные компоненты сейчас являются стандартом, и их можно создавать с помощью простой функции, которая принимает props и возвращает разметку.

Question 3

Можете объяснить концепцию Virtual DOM в React?

Accepted Answer

Virtual DOM — это абстракция реального DOM, которая используется React для улучшения производительности. Вместо того чтобы обновлять реальный DOM напрямую при каждом изменении состояния, React сначала обновляет виртуальный DOM, а затем сравнивает его с предыдущей версией, чтобы минимизировать количество операций с реальным DOM. Этот процесс называется дифференциацией (reconciliation). Пример:- React обновляет виртуальный DOM.- Он сравнивает его с предыдущим состоянием.- Изменяет только те части реального DOM, которые изменились.

Question 4

В чем разница между props и state?

Accepted Answer

"Props" — это данные, которые передаются в компонент извне, в то время как "state" — это внутренние данные компонента, которые могут изменяться. Props передаются родительским компонентом и неизменны, а state управляется внутри самого компонента и может изменяться в течение времени.

Question 5

Можете объяснить концепцию "props" в React?

Accepted Answer

"Props" (сокращение от "properties") — это способ передачи данных от одного компонента к другому. Они неизменяемы и позволяют родительским компонентам передавать информацию дочерним компонентам, чтобы настраивать их поведение или внешний вид.

Question 6

Объясните концепцию компонентов в React

Accepted Answer

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

Question 7

Что такое React и какие ключевые особенности он имеет?

Accepted Answer

React — это библиотека JavaScript для создания интерфейсов. Она позволяет разработчикам строить приложения из компонентов, которые можно переиспользовать. Ключевые особенности: использование виртуального DOM для высокой производительности, однонаправленный поток данных (unidirectional data flow), компонентный подход, а также поддержка хуков для работы с состоянием и эффектами.const CustomCodeBlock = CodeBlockLowlight.extend({
	addInputRules() {
		return [
			textblockTypeInputRule({
				find: /^```([a-z0-9+#/\-]*)?[\s
]$/i,
				type: this.type,
				getAttributes: (match) => ({
					language: match[1] || 'plaintext',
				}),
			}),
		];
	},

addNodeView() {
		return createCodeBlockNodeView(styles, lowlight);
	},
});Пример простого компонента:const CustomCodeBlock = CodeBlockLowlight.extend({
	addInputRules() {
		return [
			textblockTypeInputRule({
				find: /^```([a-z0-9+#/\-]*)?[\s
]$/i,
				type: this.type,
				getAttributes: (match) => ({
					language: match[1] || 'plaintext',
				}),
			}),
		];
	},

addNodeView() {
		return createCodeBlockNodeView(styles, lowlight);
	},
});

Question 8

Что такое prop drilling?

Accepted Answer

Prop drilling — это процесс передачи данных от родительского компонента к дочерним через "пропсы", даже если промежуточные компоненты не используют эти данные. Это может усложнить код, особенно при глубокой вложенности компонентов. Проблему prop drilling можно решить, используя такие подходы, как Context API или библиотеки управления состоянием (например, Redux). Пример:function App() { return ; } function Parent({ data }) { return ; } function Child({ data }) { return ; } function Grandchild({ data }) { return

{data}

; }

Question 9

Что такое JSX?

Accepted Answer

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

Пример:

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

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

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

Привет, мир!

;Под капотом JSX преобразуется в вызовы функций, например:React.createElement('h1', null, 'Привет, мир!');

Question 10

Что такое имутабельность и мутабильность?

Accepted Answer

Имутабельность означает, что объект или значение не могут быть изменены после создания. Мутабильность, наоборот, позволяет изменять данные. В JavaScript примитивные типы данных (например, строки, числа) неизменяемы, а объекты и массивы могут быть изменены. Имутабельные структуры данных позволяют избегать неожиданных изменений и делают программы более предсказуемыми.

Вопросы React Frontend Developer