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

[Anonymous]

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

useAppStore

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

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

const MessageList: React.FC = ({ popupId }) => {
const {
popups,
isLoading,
liveResponse: response,
liveAttachments,
updateVisibleMessages,
} = useAppStore();

1 - 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);

3- Я ненавижу повторять состояние. popups.find ((p) => p.id === Popupid) много раз, но если я изменяю код, как ниже, я снова потеряю все оптимизацию, на самом деле это будет хуже, потому что я создаю новый экземпляр объекта, чтобы обернуть значение и когда React сравнивает предыдущие и текущие значения, он всегда будет думать, что, по-видимому, не будет изменено, что, по-видимому, не будет изменено, что, по-видимому, не будет изменено, что, по-видимому, не будет изменено, что, по-видимому, не будет изменено, что, по-видимому, не будет изменено, что, по-видимому, не будет изменено, но и будет изменено, что, по-видимому, не будет изменено, что, по-видимому, не будет изменено. Это правильно? React не делает глубокого сравнения? < /P>
const { position, title } = useAppStore((state) => ({
position: state.popups[popupId]?.position,
title: state.popups[popupId]?.title,
}));
< /code>
4 - Если все мои предположения верны, как сделать уродливый код в 2) выглядеть более компактным и не повторяющимся (сухой). Является ли это в магазине единственным решением? Я надеюсь, что нет.

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