ReactJS - 如何将"全局"数据传递给深层嵌套的子组件？

Question

人们通常如何在React应用程序中获取"全局"数据？

例如,假设用户登录我的应用后,我有以下数据.

user: {
  email: 'test@user.com',
  name: 'John Doe'
}

这是我的应用程序中几乎所有组件可能想知道的数据 - 因此它可以在登录或注销状态下呈现,或者如果登录则可能显示用户电子邮件地址.

根据我的理解,在子组件中访问此数据的React方法是为顶级组件拥有数据,并使用属性将其传递给子组件,例如:

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

但这对我来说似乎很笨拙,因为这意味着我必须通过每个复合材料传递数据,只是为了将它传递给需要它的孩子.

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

注意:这个例子非常简单 - 我喜欢将意图包装成复合材料,因此可以根据需要彻底改变整个UI功能的实现细节.

编辑:我知道默认情况下,调用setState我的顶级组件会导致所有子组件被重新渲染,并且在每个子组件中我可以使用我喜欢的任何数据进行渲染(例如全局数据,而不仅仅是状态或道具).但是,人们如何选择仅通知某些子组件应该呈现它们？

Answer 1

自从我最初回答这个问题以来,我很明显React本身并不支持任何意义上的"全局"数据 - 它真正意味着管理用户界面,就是这样.您的应用数据需要存在于其他地方.话虽如此,它现在支持访问全局context数据,详见本页的其他答案.对于那些感兴趣的人来说,这个回购(Unstated)应该context以更好的方式包装,这是Kent Dodds关于contextapi 如何演变的好文章,现在React正式支持.

该context方法仅应用于真正的全球数据.如果您的数据属于任何其他类别,那么您应该执行以下操作:

• Facebook自己使用自己的Flux库解决了这个问题.
• Mobx和Redux与Flux类似,但似乎有更受欢迎的吸引力.他们做同样的事情,但以更清洁,更直观的方式.

对于某些历史记录,我将在下面的答案中留下原始编辑内容.

老答案:

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

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

和这个类似的库:

https://github.com/mquan/cortex

主要说明:我认为这是Facebook的Flux的一项工作,或类似的东西(以上是).当数据流变得过于复杂时,需要另一种机制来在回调之外的组件之间进行通信,而Flux和它的克隆似乎就是它....

Answer 2

使用React Context属性这专门用于向下传递全局数据集而不显式转发它们.它确实使组件生命周期功能复杂化,并注意我链接的页面上提供的注意事项.