Javascript: хранить глобальную переменную для одностраничного приложения - PullRequest
0 голосов
/ 13 мая 2019

A есть приложение реагирования, использующее одну страницу. Я вызываю index.html и использую ajax (axio) и обновляю страницу. Я не использую никакой маршрутизации.

У меня есть некоторые глобальные переменные, которые я буду использовать во всей области применения. Переменные, например, представляют собой целочисленный тип примитива. Некоторые переменные могут обновляться в течение жизненного цикла приложения, а некоторые остаются постоянными. Но я должен быть в состоянии связаться с ними из всех реагирующих компонентов / JavaScript. Они могут содержать константы, связанные с бизнесом, или пример маски десятичного формата, поэтому сохранять их закрытыми в каждом компоненте будет бесполезно.

Нет необходимости / причины хранить его на диске (localStorage).

Вопрос: как лучше всего (производительность и т. Д.) Хранить глобальную переменную foo в приложении?

window.foo = 10 or
window.sessionStorage.foo = 10

AFAIK, window.foo предназначен для одной страницы, а sessionStorage позволяет использовать несколько страниц в пределах одного источника. Что лучше в моем случае, когда я использую одну страницу? Есть ли другие недостатки использования window.foo ? Безопасность не важна, сохраненные вейлы не чувствительны. Наиболее важным является производительность.

1 Ответ

2 голосов
/ 13 мая 2019

Вы, вероятно, хотите использовать context вместо любого из них.Из этой документации:

Контекст предназначен для совместного использования данных, которые можно считать «глобальными» для дерева компонентов React, таких как текущий аутентифицированный пользователь, тема или предпочитаемый язык.

Определенно не используйте глобальные переменные.Глобальное пространство имен невероятно заполнено, и добавление к нему, как правило, не лучшая практика.Если бы вы использовали для этого глобальный объект, я бы рекомендовал использовать только один, и он должен ссылаться на объект со свойствами для различных фрагментов информации, которыми вы хотите поделиться.Обратите внимание, что они будут привязаны к конкретному окну.

Одна из причин, по которой стоит рассмотреть возможность использования sessionStorage (или, возможно, периодическую синхронизацию контекста React с ним), если вы хотите, чтобы изменения в одном окне отражались в другом окне.,Два окна / вкладки из одного источника совместно используют один и тот же sessionStorage и могут получить событие (storage), когда другое изменяет это хранилище.Таким образом, если бы глобальная информация была темой приложения (скажем, светлая или темная), изменение ее на одной вкладке также может повлиять на другую вкладку, если вы ответите на событие storage, обновив свой контекст React.Обратите внимание, что sessionStoragelocalStorage) хранит только строки , поэтому обычно нужно преобразовать в JSON при хранении (JSON.stringify) и из JSON при загрузке (JSON.parse).

...