Redux / MobX - нужно ли передавать данные в дочерние компоненты через реквизиты в React?

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

В случае, когда мы используем систему управления состоянием в React, такую ​​как Redux / Mob X, я предполагаю, что основная цель этих методов управления состоянием - предоставить единый источник данных и более структурированный подход к их обновлению.

Скажем, я использую библиотеку управления состоянием (MobX) для React, и предположим, что у меня есть родительский компонент, который выполняет вызов HTTP API и обновляет хранилище MobX с помощью ответа API. Теперь мне нужны эти данные в одном из дочерних / вложенных компонентов. Мой вопрос: следует ли передавать эти данные в качестве опоры дочернему компоненту или разрешить дочернему компоненту подключаться к центральному хранилищу и напрямую получать эти данные?

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

Жду ответов.

С уважением, Лалит


reactjs redux mobx mobx-react
person Lalit Jethani    schedule 29.06.2018    source источник
comment
Вам не нужно беспокоиться о производительности. Разница между двумя подходами будет незначительной. Это скорее вопрос вкуса, но если у вас есть компонент, полностью зависящий от предоставленного ему props, гораздо проще сделать его многоразовым, чем если бы он напрямую зависел от глобального хранилища.   -  person Tholle    schedule 29.06.2018
comment
Большое спасибо за ответ. Действительно ценю это. Еще одна проблема, которую я обычно видел в случае mobx, родительский компонент передает хранилище дочернему компоненту, и в то же время дочерний компонент имеет наблюдаемый декоратор. Зачем нам в этом случае нужен декоратор наблюдателя на дочернем элементе, если родитель может передавать данные через реквизиты?   -  person Lalit Jethani    schedule 29.06.2018
comment
Декоратор observer обеспечивает повторную визуализацию компонента при изменении ссылки на observables в последней визуализации. Если вы, например, передается myStore, и он ссылается на myStore.value в методе рендеринга, он будет повторно визуализироваться автоматически при изменении myStore.value. Без декоратора observer не будет.   -  person Tholle    schedule 29.06.2018
comment
Но родительский компонент также является наблюдаемым для того же хранилища, и если родительский компонент также наблюдает за той же наблюдаемой переменной, он также будет повторно отображен в случае изменения состояния хранилища, что приведет к повторному рендерингу дочернего элемента с обновленным состоянием в качестве свойств. Имеет ли смысл и здесь наблюдаемый декоратор?   -  person Lalit Jethani    schedule 29.06.2018
comment
Я бы рекомендовал прочитать эту замечательную часть документации для подробного объяснения.   -  person Tholle    schedule 29.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Это полностью зависит от ситуации. Я бы предложил разделить ваши компоненты на 2 части:

  1. Компоненты, которые можно повторно использовать в других проектах
  2. (Более высокий уровень) Компоненты, которые настолько специфичны для этого проекта, что они, вероятно, никогда не будут использоваться повторно.

Для компонентов категории 1 я бы посоветовал не использовать mobx store напрямую, а вместо этого создавать чистые компоненты React. (например, подумайте о раскрывающемся списке или раскрывающемся компоненте ajax).

Для компонентов второй части (подумайте о компонентах заголовка, нижнего колонтитула, разделах, специфичных для вашего веб-сайта). просто заставьте их напрямую взаимодействовать с магазином Mobx, чтобы вы могли быстрее кодировать то, что вам нужно (вместо того, чтобы постоянно поддерживать все).

добавление

Для компонентов категории 1 вы всегда можете обернуть их методом @inject(). Таким образом, например, вы можете превратить раскрывающийся компонент в компонент UserDropdown, который использует хранилище mobx для своего состояния. (Метод inject вводит состояние mobx как свойства в компонент).

const UserDropDownComponent = mobx.inject(stores => ({users: stores.userStore.users}))(DropDownComponent);
// usage:
<UserDropDownComponent />

Предупреждение

Для чистых компонентов не всегда будут видны изменения состояния mobx. Чтобы исправить это, вам нужно обернуть компонент аннотацией @observe. Или вам нужно вставить реквизит, обернув его в: mobx.toJS(yourMobxStateProperty)

person Joel Harkes    schedule 09.07.2018