require()单例与通过 React prop 或 context 传递它有什么区别？
每种的用例是什么？
最佳答案
如果您require()(或import)模块，您将在任何组件中获得相同的对象。
对组件所依赖的代码使用模块:
- 其他组件(
按钮)。 - 实用函数 (
getTextColor)。 - 全局数据存储 (
CommentStore)。
导入模块的好处是它非常容易做到，而且只需要执行一次。
导入模块的缺点是您无法覆盖它指向的内容。因此，例如，您无法在测试或“实时设计指南”中轻松更换 CommentStore 或 getTextColor 模块。根据您的使用情况，这可能是问题，也可能不是问题。
将某些东西作为 Prop 传递意味着您每次都可以传递不同的东西。
使用 props 作为需要自定义的组件的输入:
- 数据(
评论)。 - 事件回调 (
onClick)。 - UI 属性(
颜色)。
使用 Prop 的好处是它们是明确的且可定制的。它们是 React 中传递数据的主要机制，因此当有疑问时，请使用 props。
使用 props 的缺点是，有时您可能最终会通过不使用它们的中间组件传递大量 props，只是为了将 props 传递到叶子。 通常这在 React 中是没问题的，因为它牺牲了一些冗长的内容以方便查找错误。但在某些情况下，它可能会令人沮丧。
<小时/>Context 是一种高级 API，应该非常谨慎使用。
future 很可能会发生重大变化。
上下文就像隐式传递的 props，成为子树的“全局”:
- 主题 (
currentTheme)。 - 区域设置(
当前语言)。 - 依赖注入(inject)(
存储)。
相对于 props 的优点是您不需要通过每个组件手动传递它们。相对于导入的优点是您可以从组件外部覆盖它，这对于测试、服务器渲染和更改的内容很方便。
context 的缺点是它有 severe issues with updates ，所以不要正确依赖其值更新。例如，React Redux 可以安全地传递 store ，因为 store 本身永远不会改变，并且有自己的订阅机制。
一般来说，我们不建议直接在应用程序代码中使用上下文。如果某些库使用它也没关系，因为当其 API 发生变化时，它们会更容易迁移。
最后，我不是一个天生的画家，但这里有一个涂鸦来总结一下:
关于javascript - require() 和通过 prop 或 context 传递对象之间的区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39111775/