javascript - ReactJS-如何将 “global”数据传递给深度嵌套的子组件？

人们通常如何在React应用程序中使用“全局”数据？

例如，假设用户登录到我的应用程序后，我拥有以下数据。

user: {
  email: '[e-mail]',
  name: 'John Doe'
}

这些数据几乎是我应用中的所有组件都想知道的-因此它可以呈现为已登录或已注销状态，或者如果已登录则显示用户的电子邮件地址。

据我了解，在子组件中访问此数据的React方法是让顶层组件拥有数据，然后使用属性将其传递给子组件，例如:

<App>
  <Page1/>
  <Page2>
    <Widget1/>
    <Widget2 user={user}/>
  </Page2>
</App>

但这对我来说似乎很麻烦，因为那意味着我必须将数据传递到每个复合 Material 中，才能将其传递给需要它的 child 。

是否存在一种管理此类数据的React方法？

注意:此示例非常简化-我喜欢将意图包装为复合 Material ，因此可以根据需要大幅更改整个UI功能的实现细节。

编辑:我知道默认情况下为calling setState on my top level component would cause all child components to be re-rendered，在每个子组件中我都可以使用自己喜欢的任何数据(例如全局数据，而不仅仅是状态或 Prop )进行渲染。但是人们如何选择仅通知某些子组件应该渲染它们？

最佳答案

自从我最初回答这个问题以来，对我来说很明显，React本身在任何意义上都不支持“全局”数据-它的确意味着要管理UI。您的应用程序数据需要保存在其他地方。话虽如此，它现在确实支持访问全局context数据as detailed in this other answer on this page。对于感兴趣的人来说，这个仓库(Unstated)以一种更好的方式包装了context，以及关于context api如何发展的here's a good article by Kent Dodds，现在已经在React中正式支持。
context方法仅应用于真正的全局数据。如果您的数据属于任何其他类别，则应执行以下操作:

Facebook本身使用自己的Flux库解决了此问题。

Mobx和Redux与Flux类似，但似乎更受欢迎。他们做同样的事情，但是以更清洁，更直观的方式。

我将对这个答案的原始编辑留在下面，以了解一些历史。

旧答案:

到目前为止，我为此找到的最好的答案是这两个React mixins，我还没有机会尝试，但是听起来它们可以解决这个问题:

https://github.com/dustingetz/react-cursor

和这个类似的库:

https://github.com/mquan/cortex

重要提示:我认为这是给Facebook's Flux或类似的东西(上面的工作)。当数据流变得太复杂时，除了回调之外，还需要另一种机制在组件之间进行通信，而Flux和它的克隆似乎就是它。

关于javascript - ReactJS-如何将 “global”数据传递给深度嵌套的子组件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26120230/