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