• 高階組件的概念及應(yīng)用
• 以函數(shù)為子組件的模式
  這兩種方式的最終目的都是為了重用代碼，只是策略不同，各有優(yōu)劣，開發(fā)者可以在實(shí)際工作中決定采用哪種方式。

---

一、高階組件
1. 高階組件（Higher Order Component，HOC）并不是React提供的某種API，而是使用React的一種模式，用于增強(qiáng)現(xiàn)有組件的功能。一個(gè)高階組件就是一個(gè)函數(shù)，這個(gè)函數(shù)接受一個(gè)組件作為輸入，然后返回一個(gè)新的組件作為結(jié)果，而且，返回的新組件擁有了輸入組件所不具備的功能。這里提到的組件并不是組件實(shí)例，而是組件類，也可以是一個(gè)無狀態(tài)組件的函數(shù)。

目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、寶興網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

2. 高階組件的意義：
   （1）重用代碼。有時(shí)候很多React組件都需要公用同樣一個(gè)邏輯，比如說React-Redux中容器組件的部分，沒有必要讓每個(gè)組件都實(shí)現(xiàn)一遍shouldComponentUpdate這些生命周期函數(shù)，把這部分邏輯提取出來，利用高階組件的方式應(yīng)用出去，就可以減少很多組件的重復(fù)代碼。
   （2）修改現(xiàn)有React組件的行為。有些現(xiàn)成的React組件并不是開發(fā)者自己開發(fā)的，來自于第三方，或者即便是我們自己開發(fā)的，但是我們不想去觸碰這些組件的內(nèi)部邏輯，這時(shí)候可以用高階組件。通過一個(gè)獨(dú)立于原有組件的函數(shù)，可以產(chǎn)生新的組件，對原有組件沒有任何侵害。

3. 根據(jù)返回的新組件和傳入組件參數(shù)的關(guān)系，高階組件的實(shí)現(xiàn)方式可以分為兩大類：
   • 代理方式的高階組件
   • 繼承方式的高階組件

---

二、代理方式的高階組件
高階組件的特點(diǎn)是返回的新組建類直接繼承自React.Component類，新組件扮演的角色是傳入?yún)?shù)組件的一個(gè)“代理”，在新組件的render函數(shù)中，把被包裹組件渲染出來，除了高階組件自己要做的工作，其余功能全部轉(zhuǎn)手給了被包裹的組件。如果高階組件要做的功能不涉及除了render之外的生命周期函數(shù)，也不需要維護(hù)自己的狀態(tài)，那也可以干脆返回一個(gè)純函數(shù)，像上面的removeUserProp，代碼如下：

代理方式的高階組件，可以應(yīng)用在下列場景中：

• 操縱prop
• 訪問ref
• 抽取狀態(tài)
• 包裝組件

1. 操縱prop
   代理類型高階組件返回的新組件，渲染過程也被新組件的render函數(shù)控制，而render函數(shù)相當(dāng)于一個(gè)代理，完全決定如何使用被包裹的組件。在render函數(shù)中，this.props包含新組件接收到的所有prop，最簡單的方式是把this.props原封不動(dòng)的傳遞給被包裹的組件，當(dāng)然，高階組件也可以增減，刪除，修改傳遞給包裹組件的props列表。
   下面是一個(gè)增加props的例子：
   
   這個(gè)高階組件addNewProps增加了傳遞給包裹組件的prop，而不是刪除prop，我們讓addNewProps不只接受被包裹參數(shù)，還增加了一個(gè)new-Props參數(shù)，這樣高階組件的復(fù)用性更強(qiáng)，利用這樣的高階組件可以給不同的組件擴(kuò)充新的屬性，代碼如下：
   
   上面的代碼中，新創(chuàng)造的FooComponent被添加了名為foo的prop，BarComponent被添加了名為bar的prop，除此之外，兩者的功能也不一樣，因?yàn)橐粋€(gè)是通過Demo-Component產(chǎn)生，另一個(gè)是通過OtherComponent產(chǎn)生。由此可見，一個(gè)高階組件可以重用在不同的組件上，減少代碼的重復(fù)。

2. 訪問ref
   訪問ref并不是React組件推薦的使用方式，此處不做詳細(xì)的介紹。

3. 抽取狀態(tài)
   其實(shí)我們已經(jīng)使用過”抽取狀態(tài)“的高階組件了，react-redux中的connect函數(shù)本身不是高階組件，但是connect函數(shù)執(zhí)行的結(jié)果是另一個(gè)函數(shù)，這個(gè)函數(shù)是高階組件。
   在傻瓜組件和容器組件的關(guān)系中，通常讓傻瓜組件不要管理自己的狀態(tài)，只要做一個(gè)無狀態(tài)的組件就好，所有狀態(tài)的管理都交給外面的容器組件，這個(gè)模式就是”抽取狀態(tài)“。

4. 包裝組件
   到目前為止，通過高階組件產(chǎn)生的新組件，render函數(shù)都是直接返回被包裹組件，修改的只是props部分。其實(shí)render函數(shù)的JSX中完全可以引入其他的元素，甚至可以組合多個(gè)React組件。
   一個(gè)實(shí)用的例子是給組件添加樣式style，代碼如下：
   
   把一個(gè)組件用<div />包起來，并且添加一個(gè)style來定制其css屬性，可以直接影響被包裹的組件對應(yīng)DOM元素的展示樣式。代碼如下：
   

---

三、繼承方式的高階組件
繼承方式的高階組件采用繼承關(guān)系關(guān)聯(lián)作為參數(shù)的組件和返回的組件，假如傳入的組件參數(shù)是WrappedComponent，那么返回的組件就直接繼承自WrappedComponent。
我們用繼承方式重新實(shí)現(xiàn)一遍removeUserprop這個(gè)組件，代碼如下：

代理方式和繼承方式大的區(qū)別，是使用被包裹組件的方式。
在代理方式下，render函數(shù)中的使用被包裹組件是通過JSX代碼：
return <WrappedComponent {...otherProps}>
在繼承方式下，render函數(shù)中渲染被包裹組件的代碼如下：
return super.render()
因?yàn)槲覀儎?chuàng)造的新組件繼承自傳入的WrappedComponent，所以直接調(diào)用super.render就能夠得到渲染出來的元素。
注意：在代理方式下，WrappedComponent經(jīng)歷了一個(gè)完整的生命周期，但在繼承方式下super.render只是一個(gè)生命周期中的一個(gè)函數(shù)而已，在代理方式下產(chǎn)生的新組件和參數(shù)組件是兩個(gè)不同的組件，一次渲染，兩個(gè)組件都要經(jīng)歷各自的生命周期，在繼承方式下兩者合二為一，只有一個(gè)生命周期。
上面的例子直接修改了this.props，這種做法是不推薦的！
繼承方式的高階組件可以應(yīng)用于下列場景：

• 操縱prop
• 操縱生命周期函數(shù)

1. 操縱props
2. 操縱生命周期函數(shù)

---

四、以函數(shù)為子組件

1. 高階組件的缺點(diǎn)：對原有組件的props有了固化的要求。也就是說，能不能把一個(gè)高階組件作用于一個(gè)組件X，要先看一下這個(gè)組件X是不是能夠接受高階組件傳過來的props，如果組件X并不支持這些props，或者對這些props命名有不同，或者使用方式不是預(yù)期的方式，那也就沒有辦法應(yīng)用這個(gè)高階組件。
   “以函數(shù)為子組件”的模式就是為了克服高階組件的這種局限而生的。在這種模式下，實(shí)現(xiàn)代碼重用的不是一個(gè)函數(shù)，而是一個(gè)真正的React組件，這樣的React組件有個(gè)特點(diǎn)，要求必須有子組件的存在，而且這個(gè)子組件必須是一個(gè)函數(shù)。在組件實(shí)例的生命周期函數(shù)中，this.props.children引用的就是子組件，render函數(shù)會(huì)直接把this.props.children當(dāng)做函數(shù)來調(diào)用，得到的結(jié)果就可以作為render返回結(jié)果的一部分。
   代碼如下：
   
   AddUserProp首字母大寫，因?yàn)楝F(xiàn)在創(chuàng)造的是一個(gè)真正的組件類，而不是一個(gè)函數(shù)，這個(gè)類的代碼，和被增強(qiáng)組件的唯一聯(lián)系就是this.props.children，而且this.props.children是函數(shù)類型，在render函數(shù)中直接調(diào)用this.props.children，參數(shù)就是我們希望傳遞下去的user。
   使用這個(gè)AddUserProp的靈活之處在于它沒有對被增強(qiáng)組件有任何props要求，只是傳遞一個(gè)參數(shù)過去，至于怎么使用，完全由作為子組件的函數(shù)決定。
   對于AddUserProp的使用，如下：
   
   
   
   作為AddUserProp子組件的函數(shù)，成為了連接父組件和底層組件的橋梁。一個(gè)函數(shù)可以包含各種邏輯，這樣就給使用AddUserProp提供了大的靈活性。“以函數(shù)為子組件”的模式?jīng)]有高階組件那么多分類和應(yīng)用場景，因?yàn)橐院瘮?shù)為連接橋梁的方式已經(jīng)提供了無數(shù)中用例。

2. 性能優(yōu)化問題
   （1）使用shouldComponentUpdate進(jìn)行性能優(yōu)化：
   
   （2）不適用匿名函數(shù)

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：React總結(jié)篇之六_React高階組件-創(chuàng)新互聯(lián)
鏈接地址：http://jinyejixie.com/article34/csddse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、外貿(mào)建站、自適應(yīng)網(wǎng)站、定制網(wǎng)站、App設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)