Reactjs 在流动中什么'；一个组件中的动作影响另一个组件的适当方式是什么？

我正试着用我的头脑去思考Facebook的变化

假设我有一个带有侧菜单的应用程序，可以通过标题中的按钮隐藏和显示

我的标题是一个组件，我的侧菜单是另一个组件

目前，我的Header组件只是在HTML div side菜单元素上设置了一个类，通过CSS将其设置为隐藏

这里的总体思路是什么？

更一般地说：

flux是用于单向数据流的软件体系结构。它的链是动作->授权->商店->查看。。。该操作（例如单击按钮）将委托给保存applicationlogic和数据的存储区。。。在这里，您的操作和数据将被更改和处理。存储区最终会发出一个事件，该事件查看以前通过回调注册的（例如react组件）。在此回调中，您可以从存储中获取数据。必须指出的是，您只能以只读方式访问存储

所以对于你的情况。。。如果希望组件A影响组件B，则必须将组件B注册到存储eventEmitter，并从存储中获取所需的数据。一旦组件a触发了一个它被委托给存储的操作，您的函数就会被执行，并且最终会抛出启动组件B回调的事件

---

希望这足够清楚。。。有了一些漂亮的图画，它就更酷了

ReactJs并不真正关心它是如何获取数据的（它的数据是如何传入的，或者应该如何在web应用程序中处理这些数据）。这就是Flux的用武之地，它创建了一种处理数据的功能性方法。数据流基本上是：

Action -> Data Store -> Component

数据的变异是通过调用操作发生的。数据存储本身必须监听操作并改变存储中的数据。这使数据结构和逻辑保持平坦

在您的情况下，您的数据流可能如下所示：

标题-->用户单击-->触发操作-->更新存储-->侧菜单侦听并响应该存储更改

您的案例是一个简单的示例，您可能并不需要通量。我认为，如果您有一个维护视图状态逻辑的父组件，并对两个子组件（侧菜单和标题）使用props/callbacks，那么会更容易。但更高级的例子是，您需要进行ajax调用和维护会话，Flux将非常有用。例如，如果您有一个登录组件，并且希望根据用户显示不同的侧菜单选项和标题选项：

Login Component --> User Logins --> Calls Action #signIn --> Showing Loading State
                                                         --> Dispatcher handles action (make api call to authenticate user and load user data)

On success (for the api call), alert sessionStore, and populate store with data
On error, maybe fire another action that says login failed or something

SessionStore ---> Header Component (Listens to Store) --> Update view based on store information
             ---> Side Menu Component (Listens to Store) --> Update

---

这是通量或事件发射器有用的情况之一。切换按钮和侧边栏实际上与标题组件无关。切换按钮可以很容易地位于页脚、其他位置、多个位置，或者根本不存在。这使得将处理程序传递到标头变得不合理，因为在逻辑上，您必须将此处理程序传递给它可能呈现到的其他可能组件（或者标头的调用者必须知道它的实现，这是错误的）。侧菜单组件-->用户单击-->触发操作#按钮单击-->存储侦听并响应该操作，更改状态-->头组件侦听存储更改，并在存储更改时响应我假设您在这里交换了侧菜单组件和头组件？按钮在标题中，触发侧菜单隐藏。哦，哇，是的，我的错。标题-->用户单击-->触发操作-->更新存储-->侧菜单将侦听并响应存储更改