Что такое React и какие ключевые особенности он имеет?
Этот вопрос проверяет базовые знания о React — популярной библиотеке для создания пользовательских интерфейсов
Короткий ответ
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);
},
});Длинный ответ
React — это библиотека JavaScript, разработанная Facebook в 2013 году, которая используется для создания пользовательских интерфейсов (UI). В отличие от фреймворков (например, Angular), React отвечает только за представление (View) в архитектуре MVC.
Ключевые особенности React:
Компонентный подход
React позволяет разбивать интерфейс на небольшие независимые части (компоненты), которые можно переиспользовать. Компоненты упрощают разработку и поддержку кода.
Пример:
function Button({ label }) {
return <button>{label}</button>;
}
function App() {
return (
<div>
<Button label="Кликни меня" />
</div>
);
}Виртуальный DOM
React использует виртуальный DOM (виртуальное представление дерева DOM), чтобы минимизировать операции с реальным DOM, которые могут быть дорогими по производительности. При изменении состояния React обновляет только изменённые части страницы, а не всё дерево.
Однонаправленный поток данных
Данные передаются сверху вниз (от родительских компонентов к дочерним) через свойства (props). Это делает код предсказуемым и легче тестируемым.
JSX
React использует синтаксис JSX, который позволяет писать HTML внутри JavaScript. Это упрощает создание интерфейсов, объединяя разметку и логику.
Пример:
function Greeting() {
const name = "Мир";
return <h1>Привет, {name}!</h1>;
}Состояние (State) и хуки (Hooks)
React предлагает гибкие механизмы для работы с состоянием. Хуки, такие как useState и useEffect, позволяют добавлять состояние и управлять жизненным циклом компонента без использования классов.
Пример:
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Счётчик: {count}</p>
<button onClick={() => setCount(count + 1)}>Увеличить</button>
</div>
);
}React Developer Tools
React имеет мощные инструменты для дебага, которые помогают анализировать компоненты и их состояния.
Почему React популярен?
- Быстродействие: Благодаря виртуальному DOM.
- Масштабируемость: Легко строить сложные приложения из компонентов.
- Сообщество: Большое количество готовых библиотек и решений.
- Инструменты: Широкая экосистема, включая Next.js для SSR, React Native для мобильных приложений.
Где используется React?
React применяется для:
- Одностраничных приложений (SPA).
- Сложных интерфейсов (например, панели администратора).
- Мобильных приложений через React Native.
Пример React-приложения (корзина покупок):
function CartItem({ item, onRemove }) {
return (
<div>
<span>{item.name}</span>
<button onClick={() => onRemove(item.id)}>Удалить</button>
</div>
);
}
function ShoppingCart() {
const [items, setItems] = useState([
{ id: 1, name: "Яблоко" },
{ id: 2, name: "Банан" },
]);
const removeItem = (id) => setItems(items.filter((item) => item.id !== id));
return (
<div>
{items.map((item) => (
<CartItem key={item.id} item={item} onRemove={removeItem} />
))}
</div>
);
}React упрощает разработку динамичных, производительных интерфейсов, что делает его выбором номер один для современных веб-приложений.