成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

可靠React組件設(shè)計(jì)的7個(gè)準(zhǔn)則之組合和復(fù)用

Amos / 3340人閱讀

摘要：幸運(yùn)的是，組合易于理解。組件的組合是自然而然的。高效用戶界面可組合的層次結(jié)構(gòu)，因此，組件的組合是一種構(gòu)建用戶界面的有效的方式。這個(gè)原則建議避免重復(fù)。只有一個(gè)組件符合單一責(zé)任原則并且具有合理的封裝時(shí)，它是可復(fù)用的。

翻譯：劉小夕
原文鏈接：https://dmitripavlutin.com/7-...

原文的篇幅非常長(zhǎng)，不過(guò)內(nèi)容太過(guò)于吸引我，還是忍不住要翻譯出來(lái)。此篇文章對(duì)編寫可重用和可維護(hù)的React組件非常有幫助。但因?yàn)槠鶎?shí)在太長(zhǎng)，我對(duì)文章進(jìn)行了分割，本篇文章重點(diǎn)闡述 組合和復(fù)用。因水平有限，文中部分翻譯可能不夠準(zhǔn)確，如果你有更好的想法，歡迎在評(píng)論區(qū)指出。

更多文章可戳: https://github.com/YvetteLau/...

———————————————我是一條分割線————————————————

組合 
一個(gè)組合式組件是由更小的特定組件組合而成的。

組合（composition）是一種通過(guò)將各組件聯(lián)合在一起以創(chuàng)建更大組件的方式。組合是 React 的核心。

幸運(yùn)的是，組合易于理解。把一組小的片段，聯(lián)合起來(lái)，創(chuàng)建一個(gè)更大個(gè)兒。

讓我們來(lái)看一個(gè)常見(jiàn)的前端應(yīng)用組合模式。應(yīng)用由頭部的 header、底部的 footer、左側(cè)的 sidebar，還有中部的有效內(nèi)容聯(lián)合而成：

function Application({ children }) {
    return (
        

            
            {children}
        

    );
}

function Header() {
    return (
        

            
        

    )
}

function Footer() {
    return (
        

            
        

    )
}

function Sidebar({ children }) {
    return (
        

            
            {children}
        

    );
}

function Content({ children }) {
    return (
        

            
            {children}
        

    )
}

function Menu() {
    return (
        

            
            

                

                

                

                

            

        

    );
}

function Article() {
    return (
        

            
            

                
 

                
 

                
 

                
 

                
 

                
 

                
 

                
 

                
 

                
 

                
 

            

        

    );
}

function Label({ children }) {
    return 
<{children}>

}

const app = (
    
        

        
            
        
        
            

        
        

    
);

ReactDOM.render(app, document.getElementById("root"));

應(yīng)用程序演示了組合如何構(gòu)建應(yīng)用程序。這種組織這樣組織代碼即富于表現(xiàn)力又便于理解。

React 組件的組合是自然而然的。這個(gè)庫(kù)使用了一個(gè)聲明范式，從而不會(huì)抑制組合式的表現(xiàn)力。

由

、 和
組成. 有一個(gè) 組件, 有一個(gè)
組件.

那么組合與單一責(zé)任以及封裝有什么聯(lián)系呢？讓我們一起看看：

單一責(zé)任原則描述了如何將需求拆分為組件，封裝描述了如何組織這些組件，組合描述了如何將整個(gè)系統(tǒng)粘合在一起。
組合的好處 單一責(zé)任

組合的一個(gè)重要方面在于能夠從特定的小組件組成復(fù)雜組件的能力。這種分而治之的方式幫助了被組合而成的復(fù)雜組件也能符合 SRP 原則。

回顧之前的代碼片段， 負(fù)責(zé)渲染 header 、footer 、sidebar 和主體區(qū)域。

將此職責(zé)分為四個(gè)子職責(zé)是有意義的，每個(gè)子職責(zé)由專門的組件實(shí)現(xiàn)，分別是

、 、 和
。隨后，這些組件被粘合在 。

現(xiàn)在來(lái)看看組合的好處：通過(guò)子組件分別實(shí)現(xiàn)單一職責(zé)的方式，使 組件也符合單一責(zé)任原則。

可重用

組合有可重用的有點(diǎn)，使用組合的組件可以重用公共邏輯，

例如，組件 和 有一些公共代碼：

const instance1 = (
    
    /* Specific to Composed1 code... */
    /* Common code... */
    
);
const instance2 = (
    
    /* Common code... */
    /* Specific to Composed2 code... */
    
);

代碼復(fù)制是一個(gè)不好的實(shí)踐(例如更改 Composed1 的代碼時(shí)，也需要去更改Composed2 中的代碼)，那么如何使組件重用公共代碼？

首先，將共同代碼封裝到一個(gè)新組件中，如 中，然后

首先，在新組件中封裝公共代碼。其次， 和 應(yīng)該使用組合的方式來(lái)包含 組件，以避免代碼重復(fù)，如下：

const instance1 = (
    
        
        
    
);
const instance2 = (
    
        
        
    
);

可重用的組件符合不重復(fù)自己(Don"t repeat yourself)的原則。這種做法可以節(jié)省你的精力和時(shí)間，并且在后期，有利于代碼維護(hù)。

靈活

在 react 中，一個(gè)組合式的組件通過(guò)給子組件傳遞 props 的方式，來(lái)控制其子組件。這就帶來(lái)了靈活性的好處。

例如，有一個(gè)組件，它需要根據(jù)用戶的設(shè)備顯示信息，使用組合可以靈活地實(shí)現(xiàn)這個(gè)需求：

function ByDevice({ children: { mobile, other } }) {
    return Utils.isMobile() ? mobile : other;
}

{{
    mobile: 
Mobile detected!
,
    other: 
Not a mobile device

}}

組合組件，對(duì)于移動(dòng)設(shè)備，顯示: Mobile detected!; 對(duì)于非移動(dòng)設(shè)備，顯示 Not a mobile device"。

高效

用戶界面可組合的層次結(jié)構(gòu)，因此，組件的組合是一種構(gòu)建用戶界面的有效的方式。

注：DRY 原則理論上來(lái)說(shuō)是沒(méi)有問(wèn)題的，但在實(shí)際應(yīng)用是切忌死搬教條。它只能起指導(dǎo)作用，沒(méi)有量化標(biāo)準(zhǔn)，否則的話理論上一個(gè)程序每一行代碼都只能出現(xiàn)一次才行，這是非?；闹嚨模渌脑瓌t也是一樣，起到的也只是指導(dǎo)性的作用。

復(fù)用 
可重用的組件，一次編寫多次使用。

想象一下，如果軟件開(kāi)發(fā)總是重復(fù)造輪子。那么當(dāng)你編寫代碼時(shí)，不能使用任何已有庫(kù)或工具。甚至在同一個(gè)應(yīng)用中你都不能使用已經(jīng)編寫過(guò)的代碼。在這種環(huán)境中，是否有可能在合理的時(shí)間內(nèi)編寫出一個(gè)應(yīng)用呢？絕無(wú)可能。

此時(shí)應(yīng)該到認(rèn)識(shí)重用的重要性，使用已有的庫(kù)或代碼，而不是重復(fù)造輪子。

應(yīng)用內(nèi)的復(fù)用

根據(jù)“不要重復(fù)自己”（DRY）原則，每一條知識(shí)都必須在系統(tǒng)中具有單一，明確，權(quán)威的表示。這個(gè)原則建議避免重復(fù)。

代碼重復(fù)增加了復(fù)雜性和維護(hù)工作，但沒(méi)有增加顯著的價(jià)值。邏輯更新迫使您修改應(yīng)用程序中的所有重復(fù)代碼。

重復(fù)問(wèn)題可以用可復(fù)用組件來(lái)解決。一次編寫，多次使用。

但是，復(fù)用并非毫無(wú)成本。只有一個(gè)組件符合單一責(zé)任原則并且具有合理的封裝時(shí)，它是可復(fù)用的。

符合單一職責(zé)原則是必須的：

復(fù)用一個(gè)組件實(shí)際上就意味著復(fù)用其職責(zé)

只有一個(gè)職責(zé)的組件是最容易復(fù)用的。

但是，當(dāng)一個(gè)組件錯(cuò)誤地具有多個(gè)職責(zé)時(shí)，它的復(fù)用會(huì)增加大量的開(kāi)銷。你只想復(fù)用一個(gè)職責(zé)實(shí)現(xiàn)，但也會(huì)得到不必要的職責(zé)實(shí)現(xiàn)。比如，你只是想要一個(gè)香蕉，但是在你得到一個(gè)香蕉的同時(shí)，不得不被迫接受所有的叢林。

合理封裝的組件。隱藏了內(nèi)部實(shí)現(xiàn)，并且有明確的 props ，使得組件可以使用與多種需要復(fù)用的場(chǎng)合。

復(fù)用第三方庫(kù)

某個(gè)工作日，你剛剛收到了為應(yīng)用增加新特性的任務(wù)，在撩起袖子狂敲代碼之前，先稍等幾分鐘。

你要做的工作在很大概率上已經(jīng)被解決了。由于 React 非常流行以及其非常棒的開(kāi)源社區(qū)，先搜索一下是否有已存在的解決方案是明智之舉。

查看 brillout/awesome-react-components ，它有一個(gè)可復(fù)用的組件列表。

優(yōu)秀的第三方庫(kù)有結(jié)構(gòu)性的影響，并且會(huì)推廣最佳實(shí)踐。以我的經(jīng)驗(yàn)而言，最有影響的當(dāng)屬 react-router 和 redux。

react-router 使用了聲明式的路由來(lái)構(gòu)建一個(gè)單頁(yè)應(yīng)用。使用 將 URL 和組件關(guān)聯(lián)起來(lái)。當(dāng)用戶訪問(wèn)匹配的 URL 時(shí)，路由將渲染相應(yīng)的組件。

redux 和 react-redux 引入了單向和可預(yù)測(cè)的應(yīng)用狀態(tài)管理?？梢詫惒降暮头羌兊拇a（例如 HTTP 請(qǐng)求）從組件中提取出來(lái)，從而符合單一職責(zé)原則并創(chuàng)建出 純（pure）組件 或 幾乎純（almost-pure）的組件。

這里是一份檢查清單可以確定第三方庫(kù)是否值得使用，：

文檔：檢查庫(kù)是否具備有意義的 README.md 文件和詳細(xì)的文檔

測(cè)試過(guò)的：可信賴庫(kù)的一個(gè)顯著特征就是有高的測(cè)試覆蓋率

維護(hù)：看看庫(kù)作者創(chuàng)建新特性、修改bug及日常維護(hù)的頻率

最后謝謝各位小伙伴愿意花費(fèi)寶貴的時(shí)間閱讀本文，如果本文給了您一點(diǎn)幫助或者是啟發(fā)，請(qǐng)不要吝嗇你的贊和Star，您的肯定是我前進(jìn)的最大動(dòng)力。https://github.com/YvetteLau/...

關(guān)注小姐姐的公眾號(hào)，加入交流群。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106659.html

相關(guān)文章

  • 可靠React組件設(shè)計(jì)的7個(gè)準(zhǔn)則之終篇

    摘要：?jiǎn)卧獪y(cè)試不僅涉及早期錯(cuò)誤檢測(cè)。當(dāng)組件的架構(gòu)設(shè)計(jì)很脆弱時(shí)，就會(huì)變得難以測(cè)試，而當(dāng)組件難以測(cè)試的時(shí)候，你大概念會(huì)跳過(guò)編寫單元測(cè)試的過(guò)程，最終的結(jié)果就是組件未測(cè)試?？蓽y(cè)試性是確定組件結(jié)構(gòu)良好程度的實(shí)用標(biāo)準(zhǔn)。可復(fù)用的組件是精心設(shè)計(jì)的系統(tǒng)的結(jié)果。 翻譯：劉小夕原文鏈接：https://dmitripavlutin.com/7-... 本篇文章重點(diǎn)闡述可測(cè)試和富有意義。因水平有限，文中部分翻譯可...

    jasperyang 評(píng)論0 收藏0

  • 可靠React組件設(shè)計(jì)的7個(gè)準(zhǔn)則之SRP

    摘要：編寫組件時(shí)要考慮的基本準(zhǔn)則是單一職責(zé)原則。這些更改通常要求組件在隔離狀態(tài)下易于修改這也是的目標(biāo)。解決多重責(zé)任問(wèn)題需要將分割為兩個(gè)組件和。組件之間的通信是通過(guò)實(shí)現(xiàn)。更改的唯一原因是修改表單字段。 翻譯：劉小夕原文鏈接：https://dmitripavlutin.com/7-... 原文的篇幅非常長(zhǎng)，不過(guò)內(nèi)容太過(guò)于吸引我，還是忍不住要翻譯出來(lái)。此篇文章對(duì)編寫可重用和可維護(hù)的React組...

    Charles 評(píng)論0 收藏0

  • 可靠React組件設(shè)計(jì)的7個(gè)準(zhǔn)則之封裝

    摘要：組件可以處理其他組件的實(shí)例化為了避免破壞封裝，請(qǐng)注意通過(guò)傳遞的內(nèi)容。因此，將狀態(tài)管理的父組件實(shí)例傳遞給子組件會(huì)破壞封裝。讓我們改進(jìn)兩個(gè)組件的結(jié)構(gòu)和屬性，以便恢復(fù)封裝。組件的可重用性和可測(cè)試性顯著增加。 翻譯：劉小夕原文鏈接：https://dmitripavlutin.com/7-... 原文的篇幅非常長(zhǎng)，不過(guò)內(nèi)容太過(guò)于吸引我，還是忍不住要翻譯出來(lái)。此篇文章對(duì)編寫可重用和可維護(hù)的Re...

    yck 評(píng)論0 收藏0

  • 函數(shù)式編程與面向?qū)ο缶幊蘙5]:編程的本質(zhì)

    摘要：函數(shù)式編程與面向?qū)ο缶幊叹幊痰谋举|(zhì)之劍目錄編程的本質(zhì)讀到兩篇文章寫的不錯(cuò)綜合摘錄一下復(fù)合是編程的本質(zhì)函數(shù)式程序員在洞察問(wèn)題方面會(huì)遵循一個(gè)奇特的路線。在面向?qū)ο缶幊讨?，類或接口的聲明就是表面? 函數(shù)式編程與面向?qū)ο缶幊蘙5]:編程的本質(zhì) 之劍 2016.5.6 01:26:31 編程的本質(zhì) 讀到兩篇文章,寫的不錯(cuò), 綜合摘錄一下 復(fù)合是編程的本質(zhì) 函數(shù)式程序員在洞察問(wèn)題方面會(huì)遵循...

    miracledan 評(píng)論0 收藏0

  • JavaScript代碼風(fēng)格要素

    摘要：刪除不必要的代碼。而簡(jiǎn)化前的代碼包含的語(yǔ)法要素對(duì)于傳達(dá)代碼意義本身作用并不大。刪除不必要的代碼有時(shí)候，我們?cè)噲D為不必要的事物命名。例如，大多數(shù)情況下，你應(yīng)該省略僅僅用來(lái)當(dāng)做返回值的變量。你的函數(shù)名應(yīng)該已經(jīng)說(shuō)明了關(guān)于函數(shù)返回值的信息。 原文地址 本文已在前端早讀課公眾號(hào)首發(fā)：【第952期】JavaScript代碼風(fēng)格要素 譯者：墨白 校對(duì)：野草 1920年，由威廉·斯特倫克(Will...

    YPHP 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<