Автор оригинала: FreeCodeCamp Community Member.
Сэма Коркос
С появлением Реагировать и Redux. Появился общий вопрос:
Но этот вопрос на самом деле слишком упрощает, потому что есть также два других способа, которые вы можете хранить данные для использования в компоненте: Статический и это Отказ
Давайте перейдем на то, что каждый из них, и когда вы должны их использовать.
Местное состояние
Когда отреагировали впервые введены, нам были представлены местный Государство Отказ Важно знать о местном Государство Это когда Государство Изменения значения, он вызывает переназначение.
Это государство может быть передано детям как реквизит , что позволяет вам отделить ваши компоненты между интеллектуальными данными и глупыми презентационными компонентами, если вы решили.
Вот базовое приложение с использованием местных Государство :
Ваши данные (значение счетчика) хранится в пределах Приложение Компонент и может быть передан своим детям.
Случаи применения
Предполагая, что ваш счетчик важен для вашего приложения, и хранит данные, которые будут полезны для других компонентов, вы не захотите использовать локальные Государство Чтобы сохранить это значение.
Текущая лучшая практика – использовать локальные Государство Для обработки состояния состояния вашего пользовательского интерфейса (UI), а не данными. Например, используя Управляемый компонент Для заполнения формы является совершенно действительным использованием местных Государство Отказ
Еще один пример данных пользовательских пользователей, которые вы могли хранить в местном Государство Было бы названная выбранная вкладка из списка опций.
Хороший способ подумать, когда использовать местные Государство состоит в том, чтобы рассмотреть, будет ли значение, которое вы храните, будет использоваться другим компонентом. Если значение имеет значение только для одного компонента (или, возможно, одного ребенка этого компонента), то безопасно сохранить это значение в локальном Государство Отказ
На вынос: Держите пользовательские интерфейсы и временные данные (такие как входы формы) в локальном Государство Отказ
Redux Store.
Затем через некоторое время прошло и все начали комфортно с идеей Неидирекционные данные потока Мы получили Redux.
С redux мы получаем глобальный хранить . Этот магазин живет на самом высоком уровне вашего приложения и передает данные всем детям. Вы подключаетесь к глобальному магазин с соединить обертка и а MapStatetOronops. функция .
Сначала люди кладут все в redux магазин Отказ Пользователи, модалы, формы, розетки … Вы называете его.
Ниже приведено одинаковое приложение, но используя Redux. Важно отметить, что счетчик Теперь исходит от This.props.counter После сопоставления с MapstatetoProps В соединить Функция, которая берет счетчик Значение от глобального магазин и отображает его до текущего компонента реквизит Отказ
Теперь, когда вы нажимаете на кнопку, действие отправляется и глобальный магазин обновляется. Данные обрабатываются за пределами нашего локального компонента и передаются вниз.
Стоит отметить, что когда реквизит обновляются, он также вызывает повторное отображение – так же, как когда вы обновляете Государство Отказ
Случаи применения
Redux магазин отлично подходит для хранения состояния приложения, а не штата UI. Идеальный пример – это статус входа пользователя. Многие из ваших компонентов будут нуждаться в доступе к этой информации, и как только изменяется статус входа в систему, все эти компоненты (те, которые отображаются, по меньшей мере), должны будут повторно отображаться с обновленной информацией.
Redux также полезен для запуска событий, для которых вам нужен доступ на нескольких компонентах или на нескольких маршрутах. Примером этого будет модаль входа в систему, который может быть запущен множеством кнопок по всему вашему приложению. Вместо того, чтобы условно рендеринг модального в дюжине места вы можете условно сделать его на верхнем уровне вашего приложения и использовать действие Redux, чтобы вызвать его, изменив значение в магазин Отказ
Вынос : Держите данные, которые вы собираетесь делиться по всему компонентам в магазин Отказ
это. <что-то>
Один из наименее использованных функций при работе с React IS это Отказ Люди часто забывают, что React – это просто JavaScript с синтаксисом ES2015. Все, что вы можете сделать в JavaScript, вы также можете сделать в реакции.
Пример ниже – это функциональное приложение Counter, аналогично двум примерам выше.
Мы храним счетчик Значение в компоненте и использование foreryupdate () перенаправить, когда значение изменяется. Это потому, что изменения в чем-то кроме Государство и реквизит не вызывает перезарядки Отказ
Это на самом деле пример того, как вы должны не использовать это Отказ Если вы окажетесь с использованием foreryupdate () Вы, вероятно, делаете что-то не так. Для значений, для которых изменение должно вызывать перезарядку, вы должны использовать локальные Государство или реквизит/ Redux хранить .
Случаи применения
Корпус использования для это состоит в том, чтобы хранить значения, для которых изменение не должно вызывать переназначение. Например, розетки – идеальная вещь для хранения это Отказ
Кроме того, многие люди не понимают, что они уже используют это все время в определениях функций. Когда вы определяете Render () , ты действительно определяешь this.prototye.runder () , но это скрыто за синтаксисом класса ES2015.
Забрать: использовать это хранить вещи, которые не должны вызывать переназначение.
Статический
Статический Методы А свойства, пожалуй, наименее известные аспекты классов ES2015 (успокоиться, да, я знаю, что они не на самом деле классы под капотом) в основном потому, что они не используют все это часто. Но они на самом деле не особенно сложны. Если вы использовали Пропорты Вы уже определили Статический имущество.
Следующие два блока кода идентичны. Во-первых, как большинство людей определяют проптип. Второе, как вы можете определить их с Статический Отказ
Как вы можете видеть, Статический не все это сложно. Это просто еще один способ назначить значение классу. Основное различие между Статический и это Разве вам не нужно создавать класс для доступа к значению.
В приведенном выше примере вы можете увидеть, что получить StaticProperty Значение, мы могли бы просто назвать это прямо из класса, не создавая его, но чтобы получить Прототип нам пришлось создать его с помощью Новое приложение () Отказ
Случаи применения
Статические методы и свойства редко используются и должны использоваться для функций полезности, которые нуждаются все компоненты конкретного типа.
Пропорты являются примером функции утилиты, где вы прикрепите к тому, что вы прикрепите к компоненту кнопки, поскольку каждая кнопка вы представляете, понадобятся те же значения.
Другое дело использование – это если вы обеспокоены чрезмерными данными. Если вы используете GraphQL или falcor, вы можете указать, какие данные вы хотите обратно с вашего сервера. Таким образом, вы не заканчиваете гораздо больше данных, чем на самом деле для вашего компонента.
Таким образом, в примерном компонент выше, прежде чем запрашивать данные для определенного компонента, вы можете быстро получить массив необходимых значений для вашего запроса с помощью App.requireddata. Это позволяет сделать запрос без чрезмерной выборки.
Забрать: Вы, вероятно, никогда не собираетесь использовать Статический Отказ
Это другой вариант …
Существует на самом деле другой вариант, который я намеренно оставил из названия, потому что вы должны использовать его экономно: вы можете хранить вещи в модуле Переменная Отказ
Существуют конкретные ситуации, в которых она имеет смысл, но по большей части вы просто не должны этого делать.
Вы можете увидеть, что это почти так же, как и использовать Это, За исключением того, что мы храним стоимость за пределами нашего компонента, что может вызвать проблемы, если у вас есть более одного компонента на файл. Вы можете использовать это для настройки значений по умолчанию, если значения не связаны с вашим хранить иначе используя Статический Для реквизитов по умолчанию будет лучше.
Если вам нужно делиться данными между компонентами и хотите сохранить данные, доступные для всего модуля, почти всегда лучше использовать ваш redux магазин Отказ
Забрать: Не используйте переменные Scoped Module, если вы можете избежать этого.
Сэм Коркос является ведущим разработчиком и соучредителем Визитные карты , Наиболее интуитивно понятная платформа для трехмерных печатных топографических отображений, а также LearnPhoenix.io , промежуточный продвинутый учебный сайт для строительства масштабируемых приложений производства с Phoenix и реагировать. Получите $ 20 от Delanphoenix с кодом купона: free_code_camp.
Оригинал: “https://www.freecodecamp.org/news/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00/”