М.Двач / Web-мастера

React + WebSocket 3 авг 2022, 21:11 136052 В конец треда | Веб

122 Кб, 596x538238 Кб, 1386x1266

Вкатываюсь из бекенда во фронт. По сути мне на работе сказали что вот тебе время, сиди решай задачу, но главное чтоб она была на React. Я будучи дедом прочитал мануал, полистал репозиторий, собрал мелкие проекты и теперь нужно решить эту реальную задачу:

Бекенд через вебсокет высерает какие-то данные. При подключении это json со списком топиков ['topic-1', 'topic-2', 'topic-3], а потом при каждом обновлении этого топика выпёрдывает какое-то числовое значение типа: {topic: 'topic-1', value: 3}

В реакте я сделал хук который подрубается в сокету, читает первое сообщение и на основе него забивает стейт. условно setTopics(data) где data это массив который пришёл при подключении

В JSX это topics.map(topic => <Topic key={topic} name={topic}/>). понятное дело я всё упрощаю чтоб не делать простыней

Моя проблема возникает тогда когда один из этих топиков обновляется каждую секунду, а остальные топики нет и их может быть довольно много. Я не пойму как мне обновлять состояние каждого топика так чтоб не обновлялся стейт родительского компонента и не перерисовывал остальные топики или тут хватает memo на компоненте топика?

И второй вопрос такой: в топике отображается график изменений его значений и тут не очень уместно делать ререндер так как я использую библиотеку для построения графиков. При ререндере она дёргается и не отображает анимации добавления новой точки. То есть мне нужно добавлять числа в массив этого топика и при этом не перерендеривать его часть, но обрабатывать некое событие добавления

Обновить тред
« /web/В начало тредаВеб-версияНастройки/a//b//mu//s//vg/Все доски

Скачать тред только с превьюс превью и прикрепленными файлами

Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах.Подробнее

Пользуетесь скринридером — пишите, что можно улучшить.
Host-Food.ru — надёжный хостинг от 12 руб/мес | Free DNS
Зеркала М.Двача: m2ch.hk, m2ch.lib, m2chfapiswfw2wcakptqp4o6ltgchvjuxfab7urxlduraomtlnhw5xad.onion