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

Question

require()单身人士之间的区别是什么,并通过React prop或context传递它？

每个用例有哪些？

Answer 1

如果您require()(或import)一个模块,则在任何组件中都会获得相同的对象.
使用模块作为组件所依赖的代码:

• 其他组件(Button).
• 实用功能(getTextColor).
• 全局数据存储(CommentStore).

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

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

把东西作为道具传递意味着你每次都可以传递不同的东西.
使用props作为需要自定义的组件的输入:

• 数据(comment).
• 事件回调(onClick).
• UI属性(color).

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

使用道具的缺点是,有时你可能会通过不使用它们的中间组件传递大量道具,只是为了让道具落到树叶上.通常情况下,这在React中很好,因为它可以交换一些冗长以便于查找错误.但在某些情况下,它会令人沮丧.

Context是一种高级API,应该非常谨慎地使用.
它可能会在未来发生重大变化.

上下文就像隐式传递道具,成为子树的"全局":

• 主题(currentTheme).
• Locale(currentLanguage).
• 依赖注入(store).

优点props是您不需要通过每个组件手动传递它们.与导入相比,优势在于您可以从组件外部覆盖它,这对于测试,服务器呈现以及更改的内容非常方便.

缺点context是它有更新的严重问题,所以不要正确地依赖它的值更新.例如,React Redux可以安全地传递store,因为store它本身永远不会改变并且有自己的订阅机制.

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

最后,我不是一个天生的画家,但这是一个总结的涂鸦: