暂停从视图的呈现/清除状态到动画/回调完成后的反应？

Question

所以我有一个使用反应路由器的反应应用程序。路由器连接到导航器，该导航器为4条不同的路由更新相同的组件视图 - 2012, 2013, 2014, 2015。每个路由触发一个API调用，该调用会引入一些JSON，并使用新的state.data重新呈现该组件。

我想做的是能够淡出视图，然后调用API，然后使用新的state.data淡入新视图。

我目前的问题是，视图在有时间淡出之前呈现为空白，然后拉入新数据，并且一旦数据加载就会触发淡入淡出过渡。

我是否可以使用任何挂钩，以便在视图消失之前停止this.state.data清除？

/** @jsx React.DOM */

var React  = require('react');
var Router = require('react-router');
var Reqwest = require('reqwest');

var StreamItem = require('./StreamItem.jsx');

var Stream = React.createClass({
  mixins: [ Router.State ],

  getInitialState: function() {
    return {
      data: null
    }
  },

  readFromAPI: function(url, successFunction) {
    Reqwest({
      url: url,
      type: 'json',
      method: 'get',
      contentType: 'application/json',
      success: successFunction,
      error: function(error) {
        console.error(url, error['response']);
        location = '/';
      }
    });
    console.log('read api called');
  },

  componentWillMount: function () {
    this.readTweetsFromAPI();
  },

  readTweetsFromAPI: function() {
    var self = this;

    this.readFromAPI(this.getPath(), function(tweets) {
      setTimeout(function() {
        self.setState({
          data: tweets
        });
        // state of page transitions is kept a level up to include
        // other components. This function toggles a boolean to true,         
        // which toggles a css class transition on the parent 
        // component.
        self.props.fadeInPage();
      }, 500);

    }.bind(this));
  },

  render: function() {
    if (this.state.data) {
      var tweetItems = this.state.data.map(function(tweet, index) {
        return <StreamItem key={tweet.id} tweet={tweet}/>
      }.bind(this));
    }

    return (
      <div className="tweet-list__archive">
        {tweetItems}
      </div>
    );
  }

});

module.exports = Stream;