国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

由重構(gòu)react組件引發(fā)的函數(shù)式編程的思考

leone / 2907人閱讀

摘要：對于高階組件的使用場景如果有相關(guān)經(jīng)驗的或者有不同的見解的希望能夠在我的博客下面留言最近在重構(gòu)組件時，學習了一些高階組件的編寫思路，其實是由高階函數(shù)沿伸而來。

對于高階組件的使用場景如果有相關(guān)經(jīng)驗的或者有不同的見解的希望能夠在我的博客下面留言

最近在重構(gòu)react組件時，學習了一些高階組件的編寫思路，其實是由高階函數(shù)沿伸而來。
一般情況我們編寫一個react組件大致樣子如下：

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

在編寫一個基礎(chǔ)組件我們會更多的將需要配置的東西通過props傳遞進來，那么高階組件是什么樣子的呢？
個人理解高階組件就是react中復用組件邏輯的一種技巧，先來個高階函數(shù)壓壓驚：

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

如果我希望在函數(shù)處理的過程中能夠?qū)崟r追蹤這個值并且打印出來呢，我們會這樣處理：

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

其實寫到這里高階函數(shù)究竟好在哪里我還沒有體會出來，如果說對于一個組件而言我們將view層和邏輯層代碼當成參數(shù)傳遞進去，這樣我們在開發(fā)組件的時候只需要把邏輯層和展示層組裝一下就能拼成一個業(yè)務組件，但仔細思考一下其實對于一開始提出的編寫方式也能實現(xiàn)類似的功能，只需要將邏輯抽象成配置項就可以，而且對于這種高階組件還有一種實現(xiàn)方式就是繼承式

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

        }
    } 
}

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

所以目前為止，我所接觸到的業(yè)務場景，并沒有突出高階組件好在哪里。。。。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84450.html

相關(guān)文章

  • SegmentFault 技術(shù)周刊 Vol.16 - 淺入淺出 JavaScript 函數(shù)式編程

    摘要：函數(shù)式編程，一看這個詞，簡直就是學院派的典范。所以這期周刊，我們就重點引入的函數(shù)式編程，淺入淺出，一窺函數(shù)式編程的思想，可能讓你對編程語言的理解更加融會貫通一些。但從根本上來說，函數(shù)式編程就是關(guān)于如使用通用的可復用函數(shù)進行組合編程。 showImg(https://segmentfault.com/img/bVGQuc); 函數(shù)式編程（Functional Programming），一...

    csRyan 評論0 收藏0

  • 前端每周清單半年盤點之 React 與 ReactNative 篇

    摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開發(fā)者的討論。 前端每周清單半年盤點之 React 與 ReactNative 篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為...

    Barry_Ng 評論0 收藏0

  • React 組件設計和分解思考

    摘要：我們可以在組件的設計上，玩轉(zhuǎn)出很多花樣。但是，如何對一個功能復雜且臃腫的組件進行分解，也許并不是一件簡單的事情。同時，借助于新的算法引擎，兩個單元組件在渲染的效率上，樂觀地預計會有較大幅度的提升。 之前分享過幾篇關(guān)于React技術(shù)棧的文章： 做出Uber移動網(wǎng)頁版還不夠 極致性能打造才見真章 解析Twitter前端架構(gòu) 學習復雜場景數(shù)據(jù)設計 React Conf 2017 干貨總結(jié)1...

    liukai90 評論0 收藏0

  • 【譯】Redux 還是 Mobx，讓我來解決你的困惑！

    摘要：我現(xiàn)在寫的這些是為了解決和這兩個狀態(tài)管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數(shù)式編程是不斷上升的范式，但對于大部分開發(fā)者來說是新奇的。規(guī)模持續(xù)增長的應 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

    txgcwm 評論0 收藏0

發(fā)表評論

0條評論

leone

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<