javascript - 如何在状态转换前暂停组件的延迟？

在呈现页面之前，我要调用一组AJAX请求。我正在使用react-router 2.4.1。在我以前的一个项目中，使用了较旧版本的react-router，这就是我以前用来处理此问题的方式

Router.run(RouteConfig, function(Handler, state){
    var promises = state.routes.filter(function(route) {
        //Every component that needs initial data for rendering will
        //define a function fetchData in its statics which will return
        //a promise that will be resolved once all required AJAX calls
        //are made.
        return route.handler.fetchData;
    }).map(function(route) {
        return route.handler.fetchData(state.params, state.query);
    });
    if(promises.length > 0) {
        Promise.all(promises).then(function(response) {
            data = response;
            //Rendering will happen only after every call is resolved
            render(Handler, data);
        }).catch(function(response, err) {
            data = response;
            data.isError = true;
            data.splice(err.index, 1, err.reason);
            render(Handler, data);
        });
    } else {
        render(Handler, data);
    }
});

function render(Handler, data) {
    React.render(<Handler data={data}/>, document.body);
}

在新版本中，我看不到Router.run。我如何在2.4.1中实现相同目标？

最佳答案

您可以尝试使用路由器提供的onEnter挂钩。我将使用React Router显示当前设置。请记住，我声明的是路径而不是组件的依赖关系，但是您可以根据自己的需要更改行为。

以此路由列表为例：

<Route path="/" onEnter={fetchDependencies} component={AppContainer}>
  <IndexRedirect to="/home" />
  <Route path="/home" component={StaticContainer} require={loadStaticPage} />
  <Route path="/contact" component={StaticContainer} require={loadStaticPage} />
</Route>

我将自己的处理程序添加到顶部路由器以获取每个依赖项，为此，您只需要在属性onEnter上设置一个函数。我在需要一些依赖的路由上也有一个自定义属性，我将其命名为prop require，它可以简单地是一个返回诺言的函数。根据您的情况，使用该组件。

此onEnter采用具有以下签名的功能：

onEnter(nextState, replace, callback?)

回调是可选的，如果提供，路由器将不会呈现组件，直到调用回调没有任何错误为止。那就是你假装的行为。

这就是我获取依赖项的方式，您可以修改此代码以满足您的需求

function fetchDependencies(toRoute, redirect, done) {
  const { routes, params, location } = toRoute;
  const payload = Object.assign({}, location, { params });
  const promises = routes
    .map( ({ require }) => require )
    .filter( f => typeof f === 'function' )
    .map( f => f(payload) );

  return Promise.all(promises).then( () => done() , done);
}

在您的情况下，可以使用组件而不是require属性。只需更改map函数即可返回该函数。所以这条线

.map( ({ require }) => require )

会变成类似

.map( ({ component }) => component.fetchData )

这只是一个想法，我粘贴的代码只是我使用的安装程序的简化版本。我当前的设置与Redux相关，并且我试图在该示例中删除所有有关redux的参考，这就是为什么它可能并不完美的原因。我也使用同构渲染，因此我的处理程序稍微复杂一些，并且不需要客户端上的回调，因为只要获取依赖项，redux就会处理重新渲染。

但是您了解了基本思想。您需要使用onEnter挂钩。在那里，您可以获取所有依赖项，并在完成后调用回调函数。就像您的旧设置一样，但组织方式略有不同。