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...