React路由器等待解决

Question

我来自Angular，习惯于ui路由器的解析功能，这使得等待和将结果注入控制器变得很容易。

目前，我想用react来模拟这一点，而不必在使用react Router时在componentWillMount方法中编写请求(或触发操作)。我想还有更好的方法，我只是还没弄清楚是什么。

我很想得到一些建议，或者告诉我在哪里可以学会这样做

Answer 1

最好在Router.run中使用回调(http://rackt.github.io/react-router/#Router.run)。当url发生变化时，您传递给它的回调就会被调用，它负责重新呈现，就像下面这个页面上的例子：

Router.run(routes, function (Root) {
// whenever the url changes, this callback is called again
React.render(<Root/>, document.body);
});

在该函数中，您可以在调用React.render()之前执行任何需要的异步操作，如下所示：

Router.run(routes, function (Root) {
// whenever the url changes, this callback is called again
asyncStuff().then(function (data) {
React.render(<Root data={data} />, document.body);
});
});

这种方法的问题是，在数据可用之前，用户界面根本不会做出反应。相反，我建议用空状态渲染组件，并在componentDidMount中获取数据，然后在数据进入时重新渲染。或者更好的做法是，将数据获取和渲染分离为两个组件。一个组件获取数据，并将其作为属性传递给渲染组件。数据获取组件甚至可以避免渲染其他组件，除非数据在那里，比如：

render: function () {
if (this.state.data) {
return <TheComponent data={this.state.data} />;
} else {
return <Spinner />;
}
}

这是React中的一种常见模式，用于分离处理数据获取和状态的组件以及呈现该状态的组件。您希望将有状态组件尽可能向上推到层次结构中，因为它创建了一个逻辑边界。有状态组件是90%的错误发生的地方，当你在寻找错误时，能够专注于这些组件是很好的。

等待的另一个问题是，用户可能会快速导航，这意味着在第一个数据进入之前会再次调用Router.run回调。因此，您需要确保中止最后一个操作，而不是渲染它。