由重構react組件引起的函數式編程的思考

對於高階組件的使用場景若是有相關經驗的或者有不一樣的看法的但願可以在個人博客下面留言

最近在重構react組件時，學習了一些高階組件的編寫思路，實際上是由高階函數沿伸而來。
通常狀況咱們編寫一個react組件大體樣子以下：

class App extends Component {
    constructor(props){}
    life cycle(){}
    method(){}
    render(){}
}

在編寫一個基礎組件咱們會更多的將須要配置的東西經過props傳遞進來，那麼高階組件是什麼樣子的呢？
我的理解高階組件就是react中複用組件邏輯的一種技巧，先來個高階函數壓壓驚：

function add(a,b){
    return a+b
}

若是我但願在函數處理的過程當中可以實時追蹤這個值而且打印出來呢，咱們會這樣處理：

function add(a,b){
    console.log(a+b)
    return a+b
}

但是當咱們有不少這樣的小功能，好比加減乘除之類的，那咱們就要把打印那句話寫不少遍，有什麼辦法偷個懶呢？

function log(func){
        return function (){
            var args = Array.prototype.slice.call(arguments)
            var res = func.apply(null,args)
            console.log(res)
            return res
        }
    }

//感受和koa的中間件有點神似
高階組件的編寫也比較相似

function hoc(Wrap){
    return class App entends Component {
        render (){
            return <Wrap {...props}/>
        }
    }
}

其實寫到這裏高階函數究竟好在哪裏我尚未體會出來，若是說對於一個組件而言咱們將view層和邏輯層代碼當成參數傳遞進去，這樣咱們在開發組件的時候只須要把邏輯層和展現層組裝一下就能拼成一個業務組件，但仔細思考一下其實對於一開始提出的編寫方式也能實現相似的功能，只須要將邏輯抽象成配置項就能夠，並且對於這種高階組件還有一種實現方式就是繼承式

const App = (props) => {
    return class Child entends Parents{
        render (){
            return <div>{super.render()}</div>
        }
    } 
}

經過繼承的方式最好的應該就是能獲取到父類的state，可是要注意的就是當心會覆蓋父類中的方法，其實這種方式也能夠經過import一個組件的方式來引入父類。

因此目前爲止，我所接觸到的業務場景，並無突出高階組件好在哪裏。。。。