Вопросы React Frontend Developer

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

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

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

<script src="https://cdn.example.com/library.js"></script>

Пример:

- React обновляет виртуальный DOM.

- Он сравнивает его с предыдущим состоянием.

- Изменяет только те части реального DOM, которые изменились.

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

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

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

React — это библиотека JavaScript для создания интерфейсов. Она позволяет разработчикам строить приложения из компонентов, которые можно переиспользовать. Ключевые особенности: использование виртуального DOM для высокой производительности, однонаправленный поток данных (unidirectional data flow), компонентный подход, а также поддержка хуков для работы с состоянием и эффектами.

const CustomCodeBlock = CodeBlockLowlight.extend({
	addInputRules() {
		return [
			textblockTypeInputRule({
				find: /^```([a-z0-9+#/\\-]*)?[\s\n]$/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\n]$/i,
				type: this.type,
				getAttributes: (match) => ({
					language: match[1] || 'plaintext',
				}),
			}),
		];
	},

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

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>;
}

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

Пример:

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

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

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

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