将全局值传递给子组件

Question

我试图确定将全局值传递给子组件的最佳方法。我以前是通过对每个孩子(大约3-4层深)传递给我的最高层父级的引用的。不过，我不太喜欢这种方法。我的假设是，每当根值发生变化时，就会对值进行比较，并对它们进行不必要的计算。

我能想到的唯一其他解决方案是将值存储在window属性上的命名空间中，即。window.myapp.settings = {}，这将从道具中删除它，因此不会影响整个应用程序的性能。

Answer 1

React不观察对象的变化，也不必这样做。当您调用setState时，您实际上是在请求react更改组件的状态并重新呈现它。setState将更新该子树，而不是整个应用程序。

移除一个或两个键对React或一般JS没有任何影响。如果你不知道的话，<MyComp a="h" b="e" />去MyComp({a: 'h', b: 'e'})。

如果您只是为了perf而试图传递一个全局obj，那么就不必费心了；您不会在那里节省毫秒。但是是的，您可以尽可能地将组件保持在树下，这是一种良好的实践。

Answer 2

在使用i18next实现反应项目的国际化时，我遇到了类似的问题。在组件树中将i18n实例作为props到处传递感觉很乏味。我最后也设置了一个window属性，但感觉不对！

React中可用的Context是实验性的，文档中的Note使我在第一次考虑使用它时改变了主意：

语境是一种先进的、实验性的特征。API可能会在未来的版本中发生变化。 大多数应用程序都不需要使用上下文。特别是当您刚刚开始使用React时，您可能不想使用上下文。使用上下文会使您的代码更难理解，因为它会使数据流变得不那么清晰。它类似于使用全局变量通过应用程序传递状态。 如果您必须使用上下文，请谨慎使用它。 无论是构建应用程序还是构建库，尝试将上下文的使用隔离到一个小区域，并在可能的情况下避免直接使用上下文API，以便在API更改时更容易升级。