成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

leone / 2991人閱讀

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

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

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

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

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

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

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

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

可是當(dāng)我們有很多這樣的小功能，比如加減乘除之類的，那我們就要把打印那句話寫很多遍，有什么辦法偷個(gè)懶呢？

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

//感覺和koa的中間件有點(diǎn)神似
高階組件的編寫也比較類似

function hoc(Wrap){
    return class App entends Component {
        render (){
            return 
        }
    }
}

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

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

        }
    } 
}

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

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

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

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

相關(guān)文章

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

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

    csRyan 評論0 收藏0

  • 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇

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

    Barry_Ng 評論0 收藏0

  • React 組件設(shè)計(jì)和分解思考

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

    liukai90 評論0 收藏0

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

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

    txgcwm 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<