資訊專欄INFORMATION COLUMN
摘要：高階組件主要又分為屬性代理和反向繼承兩種類型，上述舉例中的函數(shù)就屬于屬性代理的類型。記住，高階函數(shù)返回的是一個(gè)函數(shù)，我們只是對(duì)其進(jìn)行了相對(duì)應(yīng)的包裝。
首先在正式的高階組件之前我們先來了解一下函數(shù)的類似操作：
function hello () {
console.log("hello")
}
function WrapperHello (fn) {
return function () {
console.log("before")
fn && fn()
console.log("after")
}
}
hello = WrapperHello(hello)
hello()
以上這段代碼的輸出會(huì)先輸出before，然后 hello，最后再是after，hello函數(shù)相當(dāng)于在外包裹了一層統(tǒng)一邏輯再進(jìn)行了返回，并且聲明是又將原本的hello函數(shù)進(jìn)行了覆蓋，這就是高階組件的基礎(chǔ)原理。
然后我們?cè)賹懸粋€(gè)基礎(chǔ)的高階組件對(duì)比一下：
import React, { Component, Fragment } from "react"
function WrapperHello (Comp) {
class WrapComp extends Component {
render () {
return (
這是高階組件特有的函數(shù)
)
}
}
return WrapComp
}
@WrapperHello
class Hello extends Component {
render () {
return (
Hello
)
}
}
export default Hello
那么在這呢，不難發(fā)現(xiàn)其實(shí)組件也是一個(gè)函數(shù)，我們采用了同種思想對(duì)其進(jìn)行了統(tǒng)一的數(shù)據(jù)處理，在WrapperHello函數(shù)中傳入的Comp組件，然后我們統(tǒng)一返回一個(gè)WrapComp函數(shù)，其中Comp在render的時(shí)候我們傳入和父級(jí)傳遞的所有props進(jìn)行數(shù)據(jù)的全部交互，然后再在Hello組件上我們用@符號(hào)進(jìn)行一個(gè)簡(jiǎn)易的寫法，實(shí)際上就是和之前函數(shù)包裹一樣的原理進(jìn)行了一次聲明，那么，我們最后輸出的組件Hello，他的顯示就會(huì)包括了我們高階組件中的‘
高階組件主要又分為屬性代理和反向繼承兩種類型，上述舉例中的函數(shù)就屬于屬性代理的類型。
反向繼承的例子：
function WrapperHello (Comp) {
class WrapComp extends Component {
componentDidMount () {
console.log("高階組件新增的生命周期,加載完成")
}
render () {
return (
)
}
}
return WrapComp
}
我們可以通過componentDidMount來修改原有組件生命周期發(fā)生的事件，這就是反向繼承的方式。
記住，高階函數(shù)返回的是一個(gè)函數(shù)，我們只是對(duì)其進(jìn)行了相對(duì)應(yīng)的包裝。
如果有好的建議和問題請(qǐng)指出，謝謝
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109143.html
摘要：裝飾者模式參與者裝飾者和被裝飾者共同的父類，是一個(gè)接口或者抽象類，用來定義基本行為定義具體對(duì)象，即被裝飾者抽象裝飾者，繼承自，從外類來擴(kuò)展。三裝飾器高階組件可以看做是裝飾器模式在的實(shí)現(xiàn)。 一 裝飾者模式 優(yōu)先使用對(duì)象組合而不是類繼承。 --《設(shè)計(jì)模式》 1.什么是裝飾者模式 定義：動(dòng)態(tài)的給對(duì)象添加一些額外的屬性或行為。相比于使用繼承，裝飾者模式更加靈活。 2.裝飾者模式參與者 Co...
摘要：所謂高階組件即使是接受一個(gè)組件作為參數(shù)返回一個(gè)新組件的函數(shù)用于提高組件的自身能力提高組件復(fù)用性普通高階組件函數(shù)將父級(jí)屬性向下傳遞并追加新屬性為添加樣式和木偶組件傳入一個(gè)組件返回一個(gè)函數(shù)式組件高階組件木偶組件我是本體是同樣還可以為增加生命周期 所謂高階組件即使是接受一個(gè)組件作為參數(shù), 返回一個(gè)新組件的函數(shù), 用于提高組件的自身能力, 提高組件復(fù)用性 1.普通高階組件 HOC函數(shù)將父級(jí)屬性...
摘要：作用是給組件增減屬性。如果你的高階組件不需要帶參數(shù)，這樣寫也是很的。那么需要建立一個(gè)引用可以對(duì)被裝飾的組件做羞羞的事情了，注意在多個(gè)高階組件裝飾同一個(gè)組件的情況下，此法并不奏效。你拿到的是上一個(gè)高階組件的函數(shù)中臨時(shí)生成的組件。 是什么 簡(jiǎn)稱HOC，全稱 High Order Component。作用是給react組件增減props屬性。 怎么用 為什么不先說怎么寫？恩，因?yàn)槟闫鋵?shí)已經(jīng)用...
閱讀 1744·2021-10-18 13:30
閱讀 2636·2021-10-09 10:02
閱讀 2971·2021-09-28 09:35
閱讀 2099·2019-08-26 13:39
閱讀 3532·2019-08-26 13:36
閱讀 1959·2019-08-26 11:46
閱讀 1144·2019-08-23 14:56
閱讀 1703·2019-08-23 10:38
