我来自Angular，习惯于ui-router的解析功能，该功能使等待和将结果注入控制器变得容易。
当前，我想用react来模仿它，而componentWillMount在使用React Router时不必在方法中编写请求（或触发动作）。我认为有更好的方法可以做到，只是我还没有弄清楚。
希望获得一些建议或将我指向可以学习的地方
最好的选择是在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);
});
});
这种方法的问题在于，直到该数据可用，您的UI才会完全反应。相反，我建议您以空状态渲染组件，componentDidMount并在传入数据时提取数据，然后在数据进入时重新渲染。甚至更好的是，将数据提取和渲染分成两个组件。一个组件获取数据，并将其作为属性传递给呈现组件。除非数据在那里，否则数据获取组件甚至可以避免呈现其他组件，例如：
render: function () {
if (this.state.data) {
return <TheComponent data={this.state.data} />;
} else {
return <Spinner />;
}
}
这是React中的一种常见模式，用于分离处理数据获取和状态的组件以及呈现该状态的组件。您希望将有状态组件尽可能地推向层次结构，因为它会创建逻辑边界。有状态的组件是90％的bug发生的地方，当您在寻找bug时可以专注于这些组件。
等待的另一个问题是用户可能会快速导航，这意味着Router.run在第一个数据进入之前将再次调用该回调。因此，您需要确保中止最后一个操作并且根本不渲染该操作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句