Reactjs - 如何让组件知道当前的视图状态？

Question

我正在使用的工具：Reactjs 0.14.7、react-router 2.0.0（通量模式）

注意：我标记了 Redux，只是因为我有一种预感（我没有使用它）我正在经历的事情可能是人们对它赞不绝口的原因之一。

---

我知道 react-router 已经管理了 组件树当前在视图中，并根据当前视图树的状态呈现组件。

问题：

但是，如果基于视图中的组件，一个组件需要知道哪些其他组件也在视图中，并且根据视图中的其他组件（视图状态）而表现不同呢？你会建议什么策略让组件知道其他组件在视图中？

我目前的解决方案：

我目前正在尝试使用 URL 来推断此全局状态，甚至对其进行解析并将其放入存储中，以便组件通过侦听该存储中的更改来了解视图状态。

我对此解决方案的问题：

简而言之，使用 store 管理视图状态变成了一个高度纠缠的过程，额外的操作散布在整个代码中。

1) 必须为任何改变路由的用户事件调用操作。

2) 在组件外部导航时需要触发动作（我认为在组件中保持动作触发要干净得多（请随意辩论那个）。

3）您还必须考虑返回按钮（当前使用 react-router onEnterHooks 来捕捉这种情况）。

但我真的很喜欢封装视图状态的概念，因为我可以想象它创建了一个很好的心理模型和更智能的组件，但只是解析当前 URL 并使用实用程序文件来确定当前视图状态在需要时，管理似乎比包含当前视图状态的商店更容易/更清洁的解决方案。

Answer 1

我认为你误解的核心在于 React 组件应该如何分层。这是一个棘手的话题，重新调整您的思维过程以准确理解模型中的状态与道具是什么，这是一项独特的挑战。

但您面临的这个问题的解决方案只是更“正确”地订购组件。

在高层次上，每个组件应该只关心传递给它的道具，而不关心其他任何事情。但是，传递哪些道具是由它的父组件决定的。结果，父母可以做出这些决定，然后对孩子产生最终结果。

作为一个简单但实​​用的例子；

var Parent = React.createClass({
    funcA: function(){
        this.setState({propB: 'something new!'});
    },
    render: function(){
        return (
        <div>
            <ChildA propA={this.state.propA} funcA={this.funcA} />
            <ChildB propB={this.state.propB} />
        </div>
        );
    }
});

通过这种关注点布局，ChildA 能够处理用户输入，将其传递给funcA，然后影响 ChildB。但是所有这一切都发生在 Child 组件不了解彼此的情况下。

Answer 2

组件应该永远需要知道正在渲染的其他组件，这是 React 的基本概念之一。您正在尝试从组件树中提取“视图状态”，此时组件树应由您的状态确定。如果您已经在使用 Flux，则需要将该信息保存在商店中，以便任何订阅的组件都可以访问。

Flux 并不是要让个人的开发变得更容易或更快，而是要让实践更容易保持对应用程序正在做什么的心智模型。这可能会牺牲一些简单性。

Redux 是对 Flux 的改进，它将可以单独订阅的多个存储与单个大型状态树组合在一起，树的不同部分由不同的“reducer”创建 - 接受状态和操作的函数和返回一个新的状态。它正是“包含当前视图状态的商店”。你的描述也很好地描述了 jQuery 应用程序中常见的开发类型，React 试图避免的开发类型。