react-高阶组件

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

只用于自己学习记录