组合所有的东西，有容乃大

---

在前面一个章节里，我们已经做了一个事例如何重用组建，现在要学会是这些组建高效联系起来，React如此强大的原因是能过让你以小的、可测试的、方便维护的组建以搭积木的方式构建出复杂的应用，运用这种方式你能够完全掌控每一个部分，

在这个章节里，我们将会通过最受欢迎的组合模式和工具,以下是这节的要点

－组建之间的联系通过props 和 children

－容器／展示模式如何使得代码更易维护

－mixins这种方式来处理问题和为什么它失败了

－什么是高阶组建以及怎样用它来更好构建应用

－recompose 库和他的ready-made函数

－如何与上下文交互以及避免耦合我们的组建

－子组建模式的功能是什么以及它有哪些好处

---

容器／展示模式如何使得代码更易维护

这种模式，每个组建分离成两个精简的部分，每个部分各司其职，容器这部分负责组建的逻辑和API调用、数据处理、事件处理，展示这部分定义用户界面，接收容器的props,轻逻辑，适合用无状态的组建，没有规定说展示组建不需要有状态，例如，它还保持UI的状态在内部

《例子已经做完》》》》》

Mixins

组建的可重性很好，但是如果不同的组建在许多地方只需要同样的行为，应该如何做呢？

我们不想要重复的撸代码，幸好React提供一个工具Mixins，当我们需要这种功能的时候在不同组建里，

虽然现在已经弃用了Mixins，但是值得我们去思考如何解决这类问题，

高阶组建

上节讲了，用Mixins来处理通用的功能，和它带来的问题，

在第二章有提到过高阶函数，这种函数赋予函数新的行为并且会返回一个新的组建，下面我们就用它来处理通用的功能，并且处理掉Mixins带来的缺点，

高阶组建是一个函数，以组建作为参数，返回一个功能增强的组建，接下来是一个使用高阶组建的例子，为每一个组建加上className

const withClassName = Component => props =>
<Component {...props}  className="my-class" />

初看起来，很难理解，声明一个withClassName函数，以Component作为参数，返回一个新函数，这个新的函数是无状态的组建，这个组建呢，接收props，渲染接收参数Component

《例子已经完成》

Recompose

高阶组建库，提供小工具封装组建的一些逻辑，傻瓜式和可重用操作组建，

假设你的组建接收一个用户对象从API，对象里面有很多的属性，让组建随意的接收对象不是好的方式，因为会依赖对象的模型，一旦对象改变了，组建将变的不可用，好的方式是让组建从父组建接收原始的定义好的单个Props，

const Profile = ({ name, age }) => (

    <div>Name: {name}</div>

     <div>Age: {age}</div>

)

Profile.propTypes = {  

           name: React.PropTypes.string,  

           age: React.PropTypes.number, 

}

Context

高阶组建能轻松的处理context

在某些情况下，使用context非常有用，通过它传递信息给子组建而不是使用props,但是，在某些情况下，我们不想通过父组件的props属性一级一级的往下传递，我们希望在某一级子组件中，直接得到上N级父组件中props中的值,如何利用React中的Context来进行值的越级传递

Function as Child

const Name = ({ children }) => children('World')

Name.propTypes = {  children: React.PropTypes.func.isRequired, } 

<NAME>

       {name => <div>Hello, {name}!</div>}

</NAME>

hello,World!