React Native 第五天

React Redux

容器组件：一个容器查找数据并且渲染它相对应的子组件。相对应 意为 拥有相同名字的组件。比如：

StockWidgetContainer => StockWidget
TagCloudContainer => TagCloud
PartyPooperListContainer => PartyPooperList

假设我们有一个展示评论的组件，把所有逻辑代码放在同一个 地方， 这样的代码具有查找数据，并且展示的能力，但是这样的代码也错失了一些React的特性

重复使用

除非在同样的情况下，评论组件不能被复用 

数据结构

组件应该对所需要的数据State进行预期，Proptypes非常合适来做这件事情

class CommentList extends React.Component {
  this.state = { comments: [] };

  componentDidMount() {
    fetchSomeComments(comments =>
      this.setState({ comments: comments }));
  }

  render() {
    return (
      <ul>
        {this.state.comments.map(c => (
          <li>{c.body}—{c.author}</li>
        ))}
      </ul>
    );
  }
}

个组件要求的数据结构很严格，但是却没有向外表达这种意见的途径，当json的数据格式发生变化，这个组件

会抛出异常。

再来一次，让我们用容器组件来重构

首先把查找数据的代码拉出来放入容器组件

现在我们重构评论列表组件，让获取评论作为一个prop

这样写有什么不同：

• 松耦了数据获取和数据展示之间的关系
• 让评论组件做到真正的复用
• 让评论列表组件拥有设置props的能力，我们可以知道发生了什么错误

  部分内容翻译自https://medium.com/@learnreact/container-components-c0e67432e005