React學(xué)習(xí)筆記之高階組件應(yīng)用
更新時(shí)間：2018年06月02日 14:19:16 作者：tiancai啊呆
這篇文章主要介紹了React 高階組件應(yīng)用，詳細(xì)的介紹了什么是React高階組件和具體使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
是什么
高階組件是一個(gè)函數(shù)，能夠接受一個(gè)組件并返回一個(gè)新的組件。沒有任何副作用。
為什么用
封裝并抽離組件的通用邏輯，讓此部分邏輯在組件間更好地被復(fù)用。
如何用
//hoc為我們的高階組件，可以使用es7裝飾器語法來使用高階組件
//當(dāng)然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的語法更優(yōu)雅一些。
//高階組件可以疊加使用，可以對一個(gè)組件使用多個(gè)高階組件
@hoc
class Hello extends React.Component {
//
}
如何實(shí)現(xià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)方法無法傳遞，必須手動(dòng)復(fù)制；refs無法傳遞。
反向繼承
下面的例子是最簡單的一個(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)：通過繼承ImportComponent，除了一些靜態(tài)方法，包括生命周期，state，各種function，我們都可以得到。
原則
- 不要修改原組件，高階組件只是通過組合的方式將子組件包裝在容器組件中，是一個(gè)無副作用的純函數(shù)。
- 不要在render方法內(nèi)部使用高階組件。
- 高階組件可以向組件添加功能，但是不應(yīng)該大幅度地改變功能。
- 為了方便調(diào)試，選擇一個(gè)顯示名稱，表示它是高階組件的結(jié)果。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
搭建React?Native熱更新平臺(tái)的詳細(xì)過程
這篇文章主要介紹了搭建React?Native熱更新平臺(tái),要實(shí)現(xiàn)?React?Native?熱更新功能，有四種思路?Code?Push、Pushy、Expo?和自研，感興趣的朋友一起通過本文學(xué)習(xí)吧2022-05-05
styled-components 樣式化組件，主要作用是它可以編寫實(shí)際的CSS代碼來設(shè)計(jì)組件樣式，本文主要介紹了React中styled-components的使用，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
本文主要介紹了React 實(shí)現(xiàn)表單組件的示例代碼,支持包括輸入狀態(tài)管理,表單驗(yàn)證,錯(cuò)誤信息展示,表單提交,動(dòng)態(tài)表單元素等功能,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07
基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實(shí)例代碼
這篇文章主要介紹了基于react hooks,zarm組件庫配置開發(fā)h5表單頁面,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要為大家介紹了Remix中mdx?table不支持表格問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了vue3中獲取ref元素的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了react?cropper圖片裁切實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
當(dāng)我們要求渲染時(shí)間盡量快、頁面響應(yīng)速度快時(shí)就會(huì)用到服務(wù)端渲染，本篇文章主要介紹了React服務(wù)端渲染，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了React 實(shí)現(xiàn)拖拽功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
VSCode配置react開發(fā)環(huán)境的步驟
本篇文章主要介紹了VSCode配置react開發(fā)環(huán)境的步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12