Как подключить несколько полей состояния в компоненте React [закрыто] ⇐ Javascript

[Anonymous]

Код: Выделить всё

useAppStore

- это хранилище Zustand.

Код: Выделить всё

const MessageList: React.FC = ({ popupId }) => {
const {
popups,
isLoading,
liveResponse: response,
liveAttachments,
updateVisibleMessages,
} = useAppStore();
< /code>
[list]
[*] popups

- это список Popupstate . Всякий раз, когда я меняю всплывающее окно от ID, например, на PopupState.position.x , я создаю новый экземпляр всплывающих окон массива и изменяю состояние всплывающего окна (также новый экземпляр) этого идентификатора. (неизменность). Поскольку я изменил массив всплывающих часов, все всплывающие окна на экране будут повторно рендеринг, что чрезвычайно расточительно, потому что я хочу обновить позицию x One Popup от ID. Это правильно? Является ли мое понимание правильно? < /P>

Код: Выделить всё

const MessageList: React.FC = ({ popupId }) => {
const themeStyle = useAppStore((state) => state.popups.find((p) => p.id === popupId)?.themeStyle);
const currentNodeId = useAppStore((state) => state.popups.find((p) => p.id === popupId)?.currentNodeId);
const messagesMap = useAppStore((state) => state.popups.find((p) => p.id === popupId)?.messagesMap);
const lastUserMessage = useAppStore((state) => state.popups.find((p) => p.id === popupId)?.lastUserMessage);
const cachedVisibleMessages = useAppStore((state) => state.popups.find((p) => p.id === popupId)?.cachedVisibleMessages);

[*] Я ненавижу повторять состояние.popups.find ((p) => p.id === Popupid) так много раз, но если я изменю код, как ниже, я снова потеряю все оптимизацию. На самом деле это будет хуже, потому что я создаю новый экземпляр объекта, чтобы обернуть значение, и когда React сравнивает предыдущее и текущее значение крюка, он всегда будет думать, что состояние изменилось, даже если сами значения поля не изменились. Это правильно? React не делает глубокого сравнения? < /P>

Код: Выделить всё

const { position, title } = useAppStore((state) => ({
position: state.popups[popupId]?.position,
title: state.popups[popupId]?.title,
}));

[/list]
Вопрос: Если мои предположения правильны, как сделать код в 2. Выглядеть более компактно и не повторно (сухое)? Кэширует его в магазине единственным решением?

Подробнее здесь: https://stackoverflow.com/questions/796 ... -component