Javascript require（）与通过prop或context传递对象之间的区别

require（）

ing一个单例和通过React prop或context传递它有什么区别

每个模块的用例是什么？

如果您

require（）

（或

import

）模块，则在任何组件中都会得到相同的对象。
对组件所依赖的代码使用模块：

• 其他组件（

  按钮

  ）
• 实用程序函数（

  getTextColor

  ）
• 全局数据存储（

  CommentStore

  ）

导入一个模块的好处是非常容易，而且只需要做一次

导入模块的缺点是，您无法覆盖它指向的内容。因此，例如，在测试中，或者在“实时设计指南”中，您无法轻松地调出

CommentStore

或

getTextColor

模块。根据您的用例，这可能是问题，也可能不是问题

---

将某物作为道具传递意味着每次都可以传递不同的东西。
使用道具输入需要自定义的组件：

• 数据（

  注释

  ）
• 事件回调（

  onClick

  ）
• UI属性（

  color

  ）

使用道具的好处是它们是明确的和可定制的。它们是React中传递数据的主要机制，因此如果有疑问，请使用道具

使用道具的缺点是，有时你可能会通过不使用道具的中间组件传递很多道具，只是为了把道具放到叶子上通常情况下，这在React中是很好的，因为它会用一些冗长的内容来轻松地查找bug。但在某些情况下，这可能会令人沮丧

---

上下文是一种高级API，应尽量少用。
未来很可能会发生重大变化

上下文就像隐式传递的道具，对于子树来说，它是“全局的”：

• 主题化（

  currentTheme

  ）
• 语言环境（

  currentLanguage

  ）
• 依赖项注入（

  store

  ）

与

道具相比

的优势在于，您不需要手动将它们传递给每个组件。与导入相比的优势在于，您可以从组件外部覆盖它，这对于测试、服务器渲染和更改非常方便

context

的缺点是它有，所以不要依赖它的值正确更新。例如，React-Redux可以安全地向下传递

store

，因为

store

本身从不更改，并且有自己的订阅机制

一般来说，我们不建议直接在应用程序代码中使用

上下文

。如果一些库使用它，这没关系，因为当它的API发生变化时，它们将更容易迁移

---

最后，我不是一个天生的画家，但这里有一个涂鸦来总结：

---

这个问题有点宽泛。你是否有一个特殊的情况，你可以谈论，让你问这个问题？@azium我不知道如何从不同的组件访问firebase。我想我会选择

context

。谢谢，这比我预期的要多。在我问这个问题之前，我实际上在考虑redux商店。但正如您所提到的，导入的模块无法轻松替换。这是一个伟大的见解。