React學(xué)習(xí)筆記之高階組件應(yīng)用
更新時間：2018年06月02日 14:19:16 作者：tiancai啊呆
這篇文章主要介紹了React 高階組件應(yīng)用，詳細(xì)的介紹了什么是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)文章
這篇文章主要介紹了搭建React?Native熱更新平臺,要實現(xiàn)?React?Native?熱更新功能，有四種思路?Code?Push、Pushy、Expo?和自研，感興趣的朋友一起通過本文學(xué)習(xí)吧2022-05-05
styled-components 樣式化組件，主要作用是它可以編寫實際的CSS代碼來設(shè)計組件樣式，本文主要介紹了React中styled-components的使用，具有一定的參考價值，感興趣的可以了解一下2022-04-04
本文主要介紹了React 實現(xiàn)表單組件的示例代碼,支持包括輸入狀態(tài)管理,表單驗證,錯誤信息展示,表單提交,動態(tài)表單元素等功能,具有一定的參考價值,感興趣的可以了解一下2024-07-07
基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實例代碼
這篇文章主要介紹了基于react hooks,zarm組件庫配置開發(fā)h5表單頁面,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要為大家介紹了Remix中mdx?table不支持表格問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了vue3中獲取ref元素的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了react?cropper圖片裁切實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
當(dāng)我們要求渲染時間盡量快、頁面響應(yīng)速度快時就會用到服務(wù)端渲染，本篇文章主要介紹了React服務(wù)端渲染，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了React 實現(xiàn)拖拽功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
VSCode配置react開發(fā)環(huán)境的步驟
本篇文章主要介紹了VSCode配置react開發(fā)環(huán)境的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12