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 NewComponent extends Component {
        render() {
            return(
                

                    
                    
World!
                
            )
        }
    }

    return HOC
}
export default NewComponent

这个 NewComponent 就是一个 HOC 函数,参数可以传入一个组件
2.现在创建一个新的组件 WrapComponent, 代码:

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

    render() {
        return(
            

                Hello
            
        )
    }
}

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(
                

                    
                    
World!
                
            )
        }
    }

    return HOC
}
export default NewComponent

这是 HOC 比较简单的用法,其他高级用法还有待探索... 具体例子请参照[HOC例子](https://github.com/licript/react-learning/tree/master/src)

to be continued...