在 React 组件之间共享数据

IT技术 javascript events reactjs redux flux

2021-05-01 16:58:30

我正在开发一个使用 Meteor 和 React 作为视图引擎的应用程序

考虑这个图：

从另一个例子中react隐藏组件

当 C4 按钮单击事件被触发时，我需要更改 C2 组件状态。由于它们没有直接关系，我无法直接从 C4 访问 C2 状态。

另一个示例是从组件提交表单并获取在另一个组件中声明的数据（输入字段的值）。

我知道有一些可能的技巧可以解决这个问题（例如 Meteor Session、通过每个组件传递数据、基于通量的 Action/Dispatcher）。

React docs 建议使用事件/订阅系统（flux 是一个可能的解决方案，但flux 远不止于此...）组件之间的通信

Redux 是另一种可能性（我有点担心，对于大型应用程序，如果我有很多动作，则组合减速器功能会爆炸，而且缺少特定于动作的订阅系统 - 就我知道当调度一个动作时所有的监听器都会被执行——我是 redux 的新手，也许我错了）

Flux 或 Redux 是有效的模式，满足比我更大的需求，我已经有了 Meteor 来完成这种工作。我唯一的需要是访问另一个内部的组件状态......

对于具有大量组件视图的中/大型应用程序，我需要一个可扩展的解决方案

解决该问题的“正确”方法是什么？

更新：

最近我给了 redux 一个机会，它似乎完成了这项工作（它真的很棒并且得到了很好的支持），所以如果你处于相同的情况，请检查React + Redux：提交多组件表单

2个回答

您可以使用任何发布/订阅事件库，然后让您的组件侦听您需要的任何事件。

例如：

import React from 'react'
import 'events' from 'eventPublishSubscribeLibrary'

class Component2 extends React.Component {
  constructor (props) {
    super(props)
    this.toggleVisibility = this.toogleVisibility.bind(this)
    this.state = {
      visible = true
    }
  }
  componentDidMount () {
    events.subscribe('clicked-button', this.toogleVisibility)
  }
  toogleVisibility () {
    this.setState({
      visible: !this.state.visible
    })
  }
  render () {
    return visible && (
      <div>content</div>
    )
  }
}

const Component4 = () => (
  <button onClick={events.publish('clicked-button')}>Toggle Visibility</button>
)

您可以在 davidwalsh 的这篇博文中找到Pub/Sub JavaScript Object的简单实现。或者你可以在 npm 中搜索其他一些库。

在“正确”的方式

这是我能想到的最简单的实现，对于小型项目，它是一个快速简单的解决方案，应该可以工作。

无论如何，只要项目增长一点，您的组件之间就会开始有很多动作/react。对于您将添加的每个新组件，跟踪所有组件之间的所有这些关系会变得更加复杂。这就是将应用程序的全局状态存储在一个地方很方便的地方，这是redux 所基于的三个原则之一：单一的事实来源。

我认为现在是向应用程序引入某种状态的最佳时机。试试 Redux，它很棒。

其它你可能感兴趣的问题

上一篇在 Fusion 360 中，如何选择整个 3D 对象，而不仅仅是其侧面或面？下一篇从未加热的玻璃床上去除 3D 打印件的好策略是什么？