由重構react元件引發的函數語言程式設計的思考

張春林2014發表於2017-07-28
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一個元件的方式來引入父類。

所以目前為止，我所接觸到的業務場景，並沒有突出高階元件好在哪裡。。。。

相關文章