React（4. 2）--数据流（实践篇）

回顾一下上一篇内容，React 是单向数据流传输的，props 和 state 共同构成原始数据。props 和 state 的基本使用，以及 什么时候使用 props 和 state：

– State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。

– state 增加了组件的复杂度同时降低了组件的可预见性，我们要尽可能创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过。

---

这一节，我们对 props 和 state 的运用进行实践，让我们更好地了解怎样使用它们，创造更好的项目。

---

这里我们将建立一个帖子列表组件(TweetList)和一个相对应的帖子计数器组件(Counter)，来说明我们怎样及什么时候来使用props & state。以此说明当Counter展示一个帖子数量时该怎么使用。（以下代码，选至 前端小野的译文- reactjs中props和state最佳实践，在此我偷个懒）

---

/**
*   Counter组件(计算器)
*/
var Counter = React.createClass({
  render: function() {
    var wordsDataSet = ['zero', 'one', 'two', 'three', 'four', 'five'];
    var word = wordsDataSet[this.props.count];

    return (
      <span>{word}</span>
    );
  }
});

/**
* TweetItem组件（列表项组件）
*/
var TweetItem = React.createClass({
  render: function() {
    return (
      <div>
        <div>@{this.props.tweet.author} says:</div>
        <div>{this.props.tweet.content}</div>
        Impressions:
        <Counter count={this.props.tweet.impressions} />
      </div>
    );
  }
});

/*
* TweetList组件（列表组件）
*/
var TweetList = React.createClass({
  getInitialState: function() {
    return {tweets: []};
  },

  componentDidMount: function() {
    var self = this;
    $.get('/latest-tweets.json', function(_tweets) {
      self.setState({tweets: _tweets});
    });
  },

  render: function() {
    var listItems = this.state.tweets.map(function(tweet, index) {
      return (
        <li key={index}>
          <TweetItem tweet={tweet} />
        </li>
      );
    });

    return (
      <ul>
        {listItems}
      </ul>
    );
  }
});

---

上面代码主要想说明一件事：最外层组件应该处理一个state，然后通过props传递给它的子组件们。（这也是Flux框架的设计思想）

当然，每个组件也会用到 state ，但是我们需要确保 state 保存的是表示它的状态最少数据。