快捷導(dǎo)航

React學(xué)習(xí)筆記之高階組件應(yīng)用

更新時(shí)間：2018年06月02日 14:19:16 作者：tiancai啊呆

這篇文章主要介紹了React 高階組件應(yīng)用，詳細(xì)的介紹了什么是React高階組件和具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

是什么

高階組件是一個(gè)函數(shù)，能夠接受一個(gè)組件并返回一個(gè)新的組件。沒(méi)有任何副作用。

為什么用

封裝并抽離組件的通用邏輯，讓此部分邏輯在組件間更好地被復(fù)用。

如何用

//hoc為我們的高階組件，可以使用es7裝飾器語(yǔ)法來(lái)使用高階組件
//當(dāng)然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的語(yǔ)法更優(yōu)雅一些。
//高階組件可以疊加使用，可以對(duì)一個(gè)組件使用多個(gè)高階組件
@hoc       
class Hello extends React.Component {
 //
}

如何實(shí)現(xiàn)

屬性代理

下面的例子是最簡(jiǎn)單的一個(gè)實(shí)現(xiàn)

function hoc(ImportComponent) {
 return class Hoc extends React.Component {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName是設(shè)置高階組件的顯示名稱
 render() {
  return <ImportComponent {...this.props} />
 }
 }
}

function getDisplayName(Component) {
 return Component.displayName || Component.name || "Component"
}

作用：操作prop，refs獲取組件實(shí)例

注意事項(xiàng)：靜態(tài)方法無(wú)法傳遞，必須手動(dòng)復(fù)制；refs無(wú)法傳遞。

反向繼承

下面的例子是最簡(jiǎn)單的一個(gè)實(shí)現(xiàn)

export function hoc(ImportComponent) {
 return class Hoc extends ImportComponent {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})`
 render() {
  return super.render()
 }
 }
}

作用：操作state；渲染劫持（操作它的render函數(shù)）

注意事項(xiàng)：通過(guò)繼承ImportComponent，除了一些靜態(tài)方法，包括生命周期，state，各種function，我們都可以得到。

原則

不要修改原組件，高階組件只是通過(guò)組合的方式將子組件包裝在容器組件中，是一個(gè)無(wú)副作用的純函數(shù)。
不要在render方法內(nèi)部使用高階組件。
高階組件可以向組件添加功能，但是不應(yīng)該大幅度地改變功能。
為了方便調(diào)試，選擇一個(gè)顯示名稱，表示它是高階組件的結(jié)果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

全棧輕量級(jí)搭配之Remix Prisma Sqlite使用分析
這篇文章主要為大家介紹了全棧輕量級(jí)搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
詳解React中的useMemo和useCallback的區(qū)別
React中的useMemo和useCallback是兩個(gè)重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個(gè)Hooks看起來(lái)很相似，但它們彼此之間還是有很大的區(qū)別的，隨著小編一起來(lái)學(xué)習(xí)吧
2023-04-04
在react中使用mockjs的方法你知道嗎
這篇文章主要為大家詳細(xì)介紹了在react中使用mockjs的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
React18新增特性介紹
react歷次版本迭代主要想解決的是兩類導(dǎo)致網(wǎng)頁(yè)卡頓的問(wèn)題，分別是cpu密集型任務(wù)和io密集型任務(wù)導(dǎo)致的卡頓問(wèn)題，react18新增特性就是為了解決上述問(wèn)題
2022-09-09
如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過(guò)濾器
這篇文章主要介紹了如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過(guò)濾器,在vue及react中經(jīng)常會(huì)遇到，今天通過(guò)實(shí)例代碼給大家講解，需要的朋友可以參考下
2018-11-11
React?SSR?中的限流案例詳解
這篇文章主要介紹了React?SSR?之限流,React SSR 畢竟涉及到了服務(wù)端，有很多服務(wù)端特有的問(wèn)題需要考慮，而限流就是其中之一，本文會(huì)通過(guò)一個(gè)簡(jiǎn)單的案例來(lái)說(shuō)明，為什么服務(wù)端需要進(jìn)行限流，需要的朋友可以參考下
2022-07-07
React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-10-10
React實(shí)現(xiàn)表格選取
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)表格選取，類似于Excel選中一片區(qū)域并獲得選中區(qū)域的所有數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
關(guān)于react+antd樣式不生效問(wèn)題的解決方式
最近本人在使用Antd開(kāi)發(fā)時(shí)遇到些問(wèn)題,所以下面這篇文章主要給大家介紹了關(guān)于react+antd樣式不生效問(wèn)題的解決方式,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
React渲染機(jī)制及相關(guān)優(yōu)化方案
這篇文章主要介紹了react中的渲染機(jī)制以及相關(guān)的優(yōu)化方案，內(nèi)容包括react渲染步驟、concurrent機(jī)制以及產(chǎn)生作用的機(jī)會(huì)，簡(jiǎn)單模擬實(shí)現(xiàn) concurrent mode，基于作業(yè)調(diào)度優(yōu)先級(jí)的思路進(jìn)行項(xiàng)目?jī)?yōu)化的兩個(gè)hooks，感興趣的小伙伴跟著小編一起來(lái)看看吧
2023-07-07