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(
                <div>
                    <WrapComponent />
                    <div>World!</div>
                </div>
            )
        }
    }

    return HOC
}
export default NewComponent

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

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 (
      <div className="App">
        <HOC/>
      </div>
    );
  }
}

export default App;

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

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

    return HOC
}
export default NewComponent

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

to be continued...

转载于:https://www.cnblogs.com/licript/p/10023275.html