1、高阶组件就是一个函数，传给它参数（包括组件，变量等），它返回一个新的组件
2、列如现在有这么个高阶组件，根据传入的参数name，从而从localstore中获得这个name的值，然后更新到传入的参数component（组件）中去
wrapWithLoadData.js文件的代码：
import Rect ，{component} from "react"
export default (WrappedComponent,name)=>{ (WrappedComponent为传进来的组件，name为传进来的参数)
class NewComnent extends Component { //定一个组件来为传进来的组件进行数据处理
constructor(){
super()
this.state={data:null}
}
componentWillMount(){
let data = localStorage.getItem(name)
this.setState({ data })
}
render () {
return <WrappedComponent data={this.state.data} />//高阶组件内部的包装组件和被包装组件之间通过 props 传递数据。
}
}
return NewComponent //返回经过数据处理的组件（其实就是作为参数传进来的组件）
}
这就是一个高阶组件，当某个组件要从localstore中获值时，就可以将这个组件作为参数传进来。
2、列：有一个组件InputWithUserName要用到上面的高阶组件（即从localstore中获取数据）
import wrapWithLoadData from './wrapWithLoadData' //获得高阶组件
class InputWithUserName extends Component {
render () {
return <input value={this.props.data} />//高阶组件内部的包装组件和被包装组件之间通过 props 传递数据。
}
}
InputWithUserName=wrapWithLoadData （InputWithUserName ，“username”）//将组件InputWithUserName作为参数传入高阶组件，到高阶组件中经过处理数据后再将其返回
export default InputWithUserName
3、如何用这个InputWithUserName组件
import InputWithUserName from './InputWithUserName'
class Index extends Component {
render () {
return ( <div> 用户名：<InputWithUserName /> </div> )
}
}
别人用这个组件InputWithUserName的时候实际是用了被加工过的组件。
如果现在我们需要另外一个文本输入框组件，它也需要 LocalStorage 加载'content' 字段的数据。我们只需要定义一个新的 TextareaWithContent：
import wrapWithLoadData from './wrapWithLoadData'
class TextareaWithContent extends Component {
render () {
return <textarea value={this.props.data} />
}
}
TextareaWithContent = wrapWithLoadData(TextareaWithContent, 'content')
export default TextareaWithContent只用于自己学习记录