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