Различия между require() и передачей объекта через prop или context

Ответ 1

Если вы require() (или import) модуль, вы получаете тот же объект в любом компоненте.
Используйте модули для кода, на который зависит ваш компонент:

• Другие компоненты (Button).
• Полезные функции (getTextColor).
• Глобальное хранилище данных (CommentStore).

Потенциал импорта модуля заключается в том, что его очень легко сделать, и вам нужно сделать это только один раз.

Недостатком импорта модуля является то, что вы не можете переопределить то, что он указывает на. Так, например, вы не можете легко заменять модули CommentStore или getTextColor при тестировании или в "живом руководстве по дизайну". В зависимости от вашего варианта использования это может быть или не быть проблемой.

Передача чего-то в качестве опоры означает, что вы можете передавать разные вещи каждый раз.
Используйте реквизиты для ввода ваших компонентов, которые необходимо настроить:

• Данные (comment).
• Обратные вызовы событий (onClick).
• Свойства пользовательского интерфейса (color).

Поверхность использования реквизита заключается в том, что theyre явный и настраиваемый. Theyre первичный механизм передачи данных вниз в React так , когда есть сомнения, используйте реквизиты.

Недостатком использования реквизита является то, что иногда вы можете передать множество реквизитов через промежуточные компоненты, которые их не используют, просто чтобы получить реквизиты до листьев. Обычно это нормально в React, потому что он торгует некоторыми подробностями для удобства поиска ошибок. Но в некоторых случаях это может расстраивать.

Контекст - это расширенный API и должен использоваться очень экономно. Вполне вероятно, что в будущем это значительно изменится.

Контекст подобен неявно переданным реквизитам, которые становятся "глобальными" для поддерева:

• Теминг (currentTheme).
• Локаль (currentLanguage).
• Инъекция зависимостей (store).

Преимущество над props заключается в том, что вам не нужно передавать их вручную через каждый компонент. Преимущество перед импортом заключается в том, что вы можете переопределить его извне компонента, который удобен для тестирования, рендеринга сервера и для изменяющихся вещей.

Недостатком context является то, что он серьезные проблемы с обновлениями, поэтому не полагается на корректное его значение. Например, React Redux может безопасно передать store вниз, потому что сам store никогда не изменяется и имеет свой собственный механизм подписки.

Обычно мы не рекомендуем использовать context в вашем коде приложения. Его прекрасно, если некоторые библиотеки используют его, потому что они будут легче переносить при изменении API.

Наконец, Im не естественный художник, но heres doodle, чтобы подвести итог: