require（）与通过prop或context传递对象之间的差异

Question

require()单身人士之间有什么区别，并通过React道具或上下文传递它？

每个用例有什么用？

Answer 1

如果您require()（或import）模块，则您在任何组件中都会获得相同的对象。
使用所依赖的代码的模块：

• 其他组件（Button）。
• 效用函数（getTextColor）。
• 全球数据存储（CommentStore）。

导入模块的好处在于它非常容易实现，而且您只需要执行一次。

导入模块的缺点是你无法覆盖它指向的内容。因此，例如，您无法在测试或“生活设计指南”中轻松更换CommentStore或getTextColor模块。根据您的使用情况，这可能是也可能不是问题。

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

• 数据（comment）。
• 事件回调（onClick）。
• UI属性（color）。

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

使用道具的缺点是，有时你最终可能会通过不使用它们的中间组件传递大量道具，只是为了让道具落到树叶上。 通常情况下，这在React 中很好，因为它可以轻松查找错误。但在某些情况下，它会让人感到沮丧。

Context是一种高级API，应该谨慎使用 very 它可能会在未来发生重大变化。

上下文就像是隐式传递的道格，它成为子树的“全局”：

• 主题（currentTheme）。
• 区域设置（currentLanguage）。
• 依赖注入（store）。

优于props的优点是您无需手动通过每个组件。与导入相比，优势在于您可以从组件外部覆盖它，这对于测试，服务器呈现以及更改的内容都很方便。

context的缺点是它有severe issues with updates，因此不依赖于其值正确更新。例如，React Redux可以安全地传递store，因为store本身永远不会改变，并且有自己的订阅机制。

一般来说，我们不建议直接在您的应用程序代码中使用context 。如果某些库使用它会很好，因为它们在API更改时更容易迁移。

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