React Router 等待解决

Question

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

目前，我想在使用 React Router 时通过 React 来模拟这一点，而不必在 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 根本不会做出反应。相反，我建议使用空状态渲染您的组件，并在 componentDidMount 中获取数据，然后在数据进入时重新渲染。或者更好的是，将数据获取和渲染分成两个组件。一个组件获取数据，并将其作为属性传递给呈现组件。除非数据存在，否则数据获取组件甚至可以避免渲染其他组件，例如：

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

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

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

React Router 等待解决

React Router wait for resolve

angularjs

reactjs