Question

工具I使用：Reactjs 0.14.7，react-router 2.0.0（Flux Pattern）

注意：我标记了Redux，只是因为我得到了预感（我还没有使用过），我所经历的可能是人们对其赞不绝口的原因之一。

据我所知，react-router已经管理了哪些部分组件树当前处于视图中，并根据当前视图树的状态呈现组件。

问题：

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

我当前的解决方案：

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

使用此解决方案的问题：

简而言之，通过商店管理视图状态变得非常纠结，整个代码中都散布着额外的操作。

1）必须为任何改变路线的用户事件调用动作。

2）在组件外部导航时需要触发动作（我认为它更清晰，可以在组件中保持动作触发（随意辩论那个）。

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

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

Answer 1

组件从不需要知道正在呈现的其他组件，这是React的基本概念之一。您正在尝试提取＆＃34;视图状态＆＃34;从您的组件树中，当您的组件树您的组件树应由您的州确定时。如果您已经在使用Flux，则需要将该信息保存在商店中，订阅的任何组件都可以访问该信息。

Flux并不是为个人提供更容易或更快的开发，而是关于启用实践，以便更容易保持应用程序正在做的事情的心智模型。这可能是以牺牲一些简单性为代价的。

Redux是Flux的一个改进，它结合了可以单个订阅的多个商店和一个大的状态树，树的不同部分由不同的＆＃34; reducer＆＃34; - 采用状态和动作并返回新状态的函数。它正好是一个包含当前视图状态的商店。＆＃34;您所描述的内容也非常好地描述了被黑客攻击的jQuery应用程序中常见的开发类型，这是React试图避免的开发类型。

Answer 2

我认为你误解的核心在于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组件知道彼此的任何事情的情况下。

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

2 个答案: