React HOC(Higher-Order Component) 高阶组件浅析

React HOC

一直有听说 React HOC(高阶组件)的特性,但是在过往的工作项目中并没有用到过,这里看了相关方文档,学习了一下

什么是 HOC (higher-order component)?

简而言之,高阶组件就是一个函数,且该函数接受一个组件作为参数，并返回一个新的组件,即给你一个组件,返回我一个新的组件.

const EnhancedComponent = higherOrderComponent(WrappedComponent)

如何使用?

1.我们创建一个 Enhanced Component,文件名为NewComponent.js,代码如下:

```
const NewComponent = (WrapComponent) => {
class HOC extends Component {
render() {
return(

)
}
}

return HOC

}
export default NewComponent```

这个 NewComponent 就是一个 HOC 函数,参数可以传入一个组件

```class WrapComponent extends Component{
constructor() {
super()
}

render() {
    return(
        <div>
            Hello
        </div>
    )
}

}

export default WrapComponent```

3.让我们通过给 NewComponent 传入 WrapComponent 就会产生一个新的组件,代码:

```import NewComponent from'./HOC/NewComponent'
import WrapComponent from './HOC/WrapComponent'

const HOC = NewComponent(WrapComponent)
class App extends Component {
render() {
return (

);
}
}

export default App;```

高阶组件的概念非常的简单,使用起来也不是特别难,当然 HOC 可以传入多个参数,当我们有类似的组件,但是数据不同的时候我们就可以使用 HOC 这种形式复用组件.
上面的 NewComponent可以改写一下:

```const NewComponent = (WrapComponent,data) => {
class HOC extends Component {
componentWillMount() {
//操作 data 通过给 WrapComponent
//传入 Props 让 WrapCom 变成拥有不同数据的组件
}
render() {
return(

)
}
}

return HOC

}
export default NewComponent```

这是 HOC 比较简单的用法,其他高级用法还有待探索...
具体例子请参照HOC例子

to be continued...