angularjs - React Router 等待解析

Question

我来自 Angular，习惯了 ui-router 的解析功能，这使得等待并将结果注入(inject) Controller 变得很容易。

目前，我想用 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);
  });
});

这种方法的问题是，在数据可用之前，您的 UI 根本不会使用react。相反，我建议以空状态渲染组件，并在 componentDidMount 中获取数据，然后在数据进入时重新渲染。或者更好的是，将数据获取和渲染分离到两个组件中。一个组件获取数据，并将其作为属性传递给呈现组件。数据获取组件甚至可以避免渲染其他组件，除非数据存在，例如:

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

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

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