根据胡子大哈的文章学习，感谢大胡分享
胡子大哈-高阶组件、context
高阶组件
什么是高阶组件
高阶组件就是一个函数，传给他一个组件，他返回一个新的组件。这个新组件会使用传入的组件作为其子组件。
高阶组件体现的是——设计
核心思想：抽象具有相同需求逻辑的组件，用函数处理
例子：
可能有很多组件有这样需求：“在组件挂载阶段，从LocalStorage加载某字段”
定义高阶组件src/Component/wrapWithLoadData.js：
import React, { Component } from 'react'
export default (WrappedComponent, name) => {
class NewComponent extends Component {
constructor () {
super()
this.state = { data: null }
}
componentWillMount () {
let data = localStorage.getItem(name)
this.setState({ data })
}
render () {
return <WrappedComponent data={this.state.data} />
}
}
return NewComponent
}
使用高阶组件：
import wrapWithLoadData from './wrapWithLoadData'
class InputWithUserName extends Component {
render () {
return <input value={this.props.data} />
}
}
InputWithUserName = wrapWithLoadData(InputWithUserName, 'username')
export default InputWithUserName
可以看到，InputWithUserName组件，在内部其从LocalStorage 加载字段的逻辑，直接是用的高阶组件包装。不用自己再写了。
那么高阶组件的作用也就一目了然了：组件之间代码复用。
组件们可能有某些相似的逻辑，把这些逻辑抽象，做成高阶组件，来达到复用效果。在高阶组件内部，通过props把数据传递给被包装的组件。
高阶组件的灵活性
高阶组件本质是装饰者模式，通过组合方式，达到很高的灵活性。
比如，上边的InputWithUserName不从LocalStorage加载，而是使用Ajax请求从服务器加载。那么，不需要修改组件逻辑，而是新写一个wrapWithAjaxData的高阶组件，然后包装InputWithUserName组件就可以了。
多层高阶组件
两个高级组件：wrapWithLoadData``wrapWithAjaxData
其中wrapWithAjaxData具体内容
...
componentWillMount () {
ajax.get('/data/' + this.props.data, (data) => {
this.setState({ data })
})
...
我们的逻辑是，先从localStorage中拿到username，然后根据username从后台拿到用户的具体数据。
修改InputWithUserName
import wrapWithLoadData from './wrapWithLoadData'
import wrapWithAjaxData from './wrapWithAjaxData'
class InputWithUserName extends Component {
render () {
return <input value={this.props.data} />
}
}
InputWithUserName = wrapWithAjaxData(InputWithUserName)
InputWithUserName = wrapWithLoadData(InputWithUserName, 'username')
export default InputWithUserName
React.js的context
全局空间：父组件设置context并放入某状态，其下每个孩子组件都可以从其取得状态，而不用一层一层的向下传递。（更改了，就会重新渲染一遍）
爷爷组件是访问不到context的。
写法
static childContextTypes = {
<key>: PropTypes.<类型>
}
getChildContext () {
return {
<key>: <value>
}
}
childContextTypes：是为context中的字段设置类型检查，必须设置
getChildContext()：用来设置组件的context
若在子组件要使用，可以写
class Title extends Component {
static contextTypes = {
themeColor: PropTypes.string
}
render () {
return (
<h1 style={{ color: this.context.themeColor }}>React.js 小书标题</h1>
)
}
contextTypes首先要类型检查，必须的
this.context.<key>即可获取
总结
context打破了组件之间必须通过props传递状态的过程，类似一个全局变量空间，其内容能被随意接触修改。这样导致程序不可控。
这种机制，对于状态管理有很大帮助，redux-react就是充分利用了这个机制。
一般我们动手写context，而是利用第三方状态管理库。
