轮询实际上并没有发生,React JS(ES6)

时间:2015-12-23 20:06:31

标签: javascript reactjs ecmascript-6 long-polling ajax-polling

请考虑以下代码:

import React    from 'react';
import ReactDOM from 'react-dom/dist/react-dom';
import chunk    from 'lodash/array/chunk';

class Tweets extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      tweets:   null,
      error:    null,
      info:     null,
      source:   null
    }
  }

  componentDidMount() {
    this._isMounted = true;
    this.startPolling();
  }

  componentDidUpdate() {
    if (this._timer) {
      clearInterval(this._timer);
      this._timer = null;
    }
  }

  componentWillUnmount() {
    this._isMounted = false;

    if (this._timer) {
      clearInterval(this._timer);
      this._timer = null;
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    for (var key in this.state) {
      for (var nextKey in nextState) {
        if (this.state[key] !== nextState[nextKey]) {
          return true
        }
      }
    }

    return false;
  }

  startPolling() {
    var self = this;

    setTimeout(function() {
      self.poll();

      if (!self._isMounted) {
        return;
      }

      self._timer = setInterval(self.poll, 10000);
    }, 1000);
  }

  poll() {
    console.log('I should be called ....');
    var self   = this;
    var source = null;

    if (this.props !== undefined) {
      source = this.props.source
    }

    $.get(source, function(result) {
      if (self._isMounted) {
        self.setState({
          error:  null,
          tweets: result.data,
          source: source
        });
      }
    }).fail(function(response) {
      self.setState({
        error: 'Could not fetch tweets. Looks like something went wrong.',
      });
    });
  }

  checkIfLoading() {
    if (this.state.tweets === null &&
        this.state.error === null &&
        this.state.info === null) {

      return true;
    }

    return false;
  }

  buildTweets () {
    let rows = [];
    let currRow;

    this.state.tweets.forEach((tweet, i) => {
      if(i % 3 === 0) {
        currRow = i;
        rows[currRow] = [];
      }

      rows[currRow].push(
          <div className='col-lg-4 col-md-6 col-sm-6 col-xs-12' key={tweet.id}>
            <div className="white-panel tweet-panel">
              <span><strong>{tweet.attributes.user_name}</strong><em>Posted: {tweet.attributes.time_ago}</em></span>
              <p><span dangerouslySetInnerHTML={{__html: tweet.attributes.tweet}} /></p>
            </div>
        </div>
      );
    });

    return rows;
  }

  render() {
    if (this.checkIfLoading()) {
      return (<div><i className="fa-li fa fa-spinner fa-spin"></i> One second please, while I fetch some tweets ....</div>);
    }

    var key = 0;

    var tweets = this.buildTweets().map(function(tweetRows){
      key += 1;
      return (
        <div key={key} className="row">
          {tweetRows}
        </div>
      )
    });

    return  (
      <div id='tweetRowContainer'>
        {tweets}
      </div>
    );
  }
}

var tweetsElement = document.getElementById("tweets");

if (tweetsElement !== null) {
    ReactDOM.render(
        <Tweets source={"//" + location.hostname + "/api/v1/fetch-tweets"} />,
        tweetsElement
    );
}

module.exports = Tweets;

我们最关心的是:

poll(){     console.log('我应该被称为......');     ...

这会在第一次获取数据时记录控件,然后显示到页面,但正如我们在此方法之前所看到的那样:

startPolling() {
    var self = this;

    setTimeout(function() {
      self.poll();

      if (!self._isMounted) {
        return;
      }

      self._timer = setInterval(self.poll, 10000);
    }, 1000);
  }

理论上这应该是民意调查......不是吗?

0 个答案:

没有答案