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

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

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

这是我的应用程序中几乎所有组件都想知道的数据,因此它可以在登录或注销状态下呈现,也可以在登录时显示用户的邮箱地址.

据我所知,在子组件中访问该数据的方法是,顶级组件拥有该数据,并使用属性将其传递给子组件,例如:

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

但这对我来说似乎很难,因为这意味着我必须通过每个组合传递数据,才能将数据传递给需要它的子元素.

Is there a React way of managing this type of data?

Note: This example is very simplified - I like to wrap intents up as composites so implementation details of entire UI features can be drastically changed as I see fit.

EDIT:我知道默认情况下是calling setState on my top level component would cause all child components to be re-rendered,在每个子组件中,我可以使用我喜欢的任何数据(例如全局数据,而不仅仅是状态或props )进行渲染.但是,人们如何 Select 只通知某些子组件应该呈现它们呢?

推荐答案

由于我最初回答了这个问题,我很明显React本身并不支持任何意义上的"全局"数据——它真正的目的是管理UI,仅此而已.你的应用程序的数据需要存放在其他地方.话虽如此,它现在确实支持访问全球context数据as detailed in this other answer on this page.这个repo(Unstated)应该以一种更好的方式对context进行了总结,对于那些感兴趣的人来说,它是here's a good article by Kent Dodds关于context api是如何演变的,现在在React中得到了官方支持.

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

  • Facebook自己使用自己的Flux库解决了这个问题.
  • MobxRedux与Flux相似,但似乎更受欢迎.他们做同样的事情,但以更干净、更直观的方式.

我将保留我对下面这个答案的原始编辑,以了解一些历史.

OLD ANSWER:


The best answer I've found for this so far are these 2 React mixins, which I haven't had a chance to try, but they sound like they'll address this problem:

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

这个类似的图书馆:

https://github.com/mquan/cortex

主要提示:I think这是一份Facebook's Flux人的工作,或者类似的工作(上面是).当数据流变得太复杂时,除了回调之外,还需要另一种机制来在组件之间进行通信,而Flux及其克隆似乎就是它....

Reactjs相关问答推荐

TypeError:SearchProduct.get()获得了意外的关键字参数查询'

如何使用皮金贴图在Reactjs中制作 map 上的点之间的线的动画?

需要特定的数学函数来标准化动画持续时间

Mantine DatePickerInput呈现错误

为什么在页面重新加载时Location.State变得未定义?

如何在我的 React 应用程序中仅显示我的 Register 组件

如何垂直对齐 React Bootstrap Table 行中的项目

使用 MUI 菜单时添加新 html 元素时布局意外滚动跳转

Next.js `getLayout` 函数没有被调用

Syncfusion:带有 TabItemsDirective 的选项卡组件不显示任何内容

如何在 React.js 中提取 PDF 的内容?

在 React 中,为什么在使用 addEventListener 时外部元素上的 onclick 事件监听器在内部元素的 onclick 事件监听器之前执行?

基于标记名的博客详细信息分组没有发生

React Final Form - 单选按钮在 FieldArray 中不起作用

从 API 中提取映射数组后出现重复元素

如何在 Cypress E2E 的站点上测试react 组件?

未捕获的错误:操作必须是使用 redux/toolkit 的普通对象

将 dict 值转换并插入到react 钩子的列表中

交换键仍然引入了 fresh 的 DOM 元素

为什么我不能使用 navigate.goBack() 导航回上一页?