> Как модифицировать и отображать данные во frontend? (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: TradeLink

Стек: JavaScript

> Пример ответа

Для модификации и отображения данных во frontend на JavaScript используется реактивный подход. Основные шаги:

Хранение состояния: Данные хранятся в переменных состояния (например, с помощью useState в React или ref во Vue).
Модификация: Изменение данных через функции-сеттеры (например, setData(newValue) в React) или прямые мутации (в Vue через reactive()).
Автоматическое обновление UI: Фреймворк (React, Vue, Angular) автоматически перерисовывает компоненты при изменении состояния. В чистом JS - вручную обновляем DOM через innerHTML, textContent или используя шаблонизаторы.

Пример на React:

JAVASCRIPT
const [data, setData] = useState([]);

// Модификация
const addItem = (item) => {
  setData(prev => [...prev, item]); // создаём новый массив
};

// Отображение
return <ul>{data.map(item => <li key={item.id}>{item.name}</li>)}</ul>;

Важно: избегать прямых мутаций (например, data.push()), чтобы сохранить реактивность. Для сложных преобразований используйте методы map, filter, reduce или библиотеки вроде Immer.