React學(xué)習(xí)筆記之高階組件應(yīng)用
更新時間：2018年06月02日 14:19:16 作者：tiancai啊呆
這篇文章主要介紹了React 高階組件應(yīng)用，詳細的介紹了什么是React高階組件和具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
是什么
高階組件是一個函數(shù)，能夠接受一個組件并返回一個新的組件。沒有任何副作用。
為什么用
封裝并抽離組件的通用邏輯，讓此部分邏輯在組件間更好地被復(fù)用。
如何用
//hoc為我們的高階組件，可以使用es7裝飾器語法來使用高階組件
//當(dāng)然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的語法更優(yōu)雅一些。
//高階組件可以疊加使用，可以對一個組件使用多個高階組件
@hoc
class Hello extends React.Component {
//
}
如何實現(xiàn)
屬性代理
下面的例子是最簡單的一個實現(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獲取組件實例
注意事項：靜態(tài)方法無法傳遞，必須手動復(fù)制；refs無法傳遞。
反向繼承
下面的例子是最簡單的一個實現(xiàn)
export function hoc(ImportComponent) {
return class Hoc extends ImportComponent {
static displayName = `Hoc(${getDisplayName(ImportComponent)})`
render() {
return super.render()
}
}
}
作用： 操作state；渲染劫持（操作它的render函數(shù)）
注意事項：通過繼承ImportComponent，除了一些靜態(tài)方法，包括生命周期，state，各種function，我們都可以得到。
原則
- 不要修改原組件，高階組件只是通過組合的方式將子組件包裝在容器組件中，是一個無副作用的純函數(shù)。
- 不要在render方法內(nèi)部使用高階組件。
- 高階組件可以向組件添加功能，但是不應(yīng)該大幅度地改變功能。
- 為了方便調(diào)試，選擇一個顯示名稱，表示它是高階組件的結(jié)果。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
全棧輕量級搭配之Remix Prisma Sqlite使用分析
這篇文章主要為大家介紹了全棧輕量級搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
詳解React中的useMemo和useCallback的區(qū)別
React中的useMemo和useCallback是兩個重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個Hooks看起來很相似，但它們彼此之間還是有很大的區(qū)別的，隨著小編一起來學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細介紹了在react中使用mockjs的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
react歷次版本迭代主要想解決的是兩類導(dǎo)致網(wǎng)頁卡頓的問題，分別是cpu密集型任務(wù)和io密集型任務(wù)導(dǎo)致的卡頓問題，react18新增特性就是為了解決上述問題2022-09-09
如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器
這篇文章主要介紹了如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器,在vue及react中經(jīng)常會遇到，今天通過實例代碼給大家講解，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了React?SSR?之限流,React SSR 畢竟涉及到了服務(wù)端，有很多服務(wù)端特有的問題需要考慮，而限流就是其中之一，本文會通過一個簡單的案例來說明，為什么服務(wù)端需要進行限流，需要的朋友可以參考下2022-07-07
React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
這篇文章主要為大家詳細介紹了React實現(xiàn)表格選取，類似于Excel選中一片區(qū)域并獲得選中區(qū)域的所有數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
關(guān)于react+antd樣式不生效問題的解決方式
最近本人在使用Antd開發(fā)時遇到些問題,所以下面這篇文章主要給大家介紹了關(guān)于react+antd樣式不生效問題的解決方式,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了react中的渲染機制以及相關(guān)的優(yōu)化方案，內(nèi)容包括react渲染步驟、concurrent機制以及產(chǎn)生作用的機會，簡單模擬實現(xiàn) concurrent mode，基于作業(yè)調(diào)度優(yōu)先級的思路進行項目優(yōu)化的兩個hooks，感興趣的小伙伴跟著小編一起來看看吧2023-07-07