React入門0x018: 高階函數(shù)組件(HOC)

QLQ 發(fā)布于2019-08-23 13:52 / 782人閱讀

摘要：總結(jié)其實(shí)，這個(gè)和的思想有很大的淵源，不推薦繼承，而是推薦組合，而就是其中的典范。比如我們寫(xiě)了兩個(gè)個(gè)高階組件，一個(gè)是，一個(gè)是，組件就可以隨意的在和之間隨意切換，而不需要改動(dòng)組件原有代碼。

0x000 概述

高階函數(shù)組件...還是一個(gè)函數(shù)，和函數(shù)組件不同的是他返回了一個(gè)完整的組件...他返回了一個(gè)class?。。?/p> 0x001 直接上栗子

照常，先寫(xiě)個(gè)App組件，外部傳入一個(gè)theme

class App extends React.Component {
    render() {
        return (
            
                App theme: {this.props.theme}
            
        );
    }
}

寫(xiě)一個(gè)函數(shù)，傳入一個(gè)組件返回新的一個(gè)類組件，新的類組件渲染了傳入的組件，并添加theme到傳入的組件中

const withTheme = (OriginComponent) => {
    return class WrappedComponent extends React.Component {
        render() {
            return (
                
            );
        }
    }
}

調(diào)用組件

let ThemeApp = withTheme(App)

渲染

ReactDom.render(
    ,
document.getElementById("app"))

效果

說(shuō)明
這個(gè)就是所為的HOC了，其實(shí)也沒(méi)有啥，就是傳入一個(gè)組件，返回另一個(gè)組件，但是這其中的作用可就大多了，返回的新的組件有自己的生命周期，并且可以操控傳入組件的屬性，react-redux的connect實(shí)現(xiàn)方式就和這類似。

0x003 總結(jié)

其實(shí)，這個(gè)和React的思想有很大的淵源，React不推薦繼承，而是推薦組合，而HOC就是其中的典范。比如我們寫(xiě)了兩個(gè)個(gè)with*高階組件，一個(gè)是withRedux，一個(gè)是withLocalstorage，組件就可以隨意的在redux和locaostorage之間隨意切換，而不需要改動(dòng)組件原有代碼。

云服務(wù)器 GPU云服務(wù)器高階組件高階函數(shù) 高階函數(shù)應(yīng)用函數(shù)式組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99705.html

相關(guān)文章

動(dòng)手寫(xiě)個(gè)React高階組件

摘要：作用是給組件增減屬性。如果你的高階組件不需要帶參數(shù)，這樣寫(xiě)也是很的。那么需要建立一個(gè)引用可以對(duì)被裝飾的組件做羞羞的事情了，注意在多個(gè)高階組件裝飾同一個(gè)組件的情況下，此法并不奏效。你拿到的是上一個(gè)高階組件的函數(shù)中臨時(shí)生成的組件。是什么簡(jiǎn)稱HOC，全稱 High Order Component。作用是給react組件增減props屬性。怎么用為什么不先說(shuō)怎么寫(xiě)？恩，因?yàn)槟闫鋵?shí)已經(jīng)用...

xiaokai 2019-08-22 18:14 評(píng)論0 收藏0
寫(xiě)給自己的React HOC(高階組件)手冊(cè)

前言 HOC(高階組件)是React中的一種組織代碼的手段,而不是一個(gè)API. 這種設(shè)計(jì)模式可以復(fù)用在React組件中的代碼與邏輯,因?yàn)橐话銇?lái)講React組件比較容易復(fù)用渲染函數(shù), 也就是主要負(fù)責(zé)HTML的輸出. 高階組件實(shí)際上是經(jīng)過(guò)一個(gè)包裝函數(shù)返回的組件,這類函數(shù)接收React組件處理傳入的組件,然后返回一個(gè)新的組件. 注意:前提是建立在不修改原有組件的基礎(chǔ)上. 文字描述太模糊,借助于官方...

W4n9Hu1 2019-08-26 13:52 評(píng)論0 收藏0
React中的函數(shù)子組件(FaCC)和高階組件(HOC)

摘要：高階函數(shù)我們都用過(guò)，就是接受一個(gè)函數(shù)然后返回一個(gè)經(jīng)過(guò)封裝的函數(shù)而高階組件就是高階函數(shù)的概念應(yīng)用到高階組件上使用接受一個(gè)組件返回一個(gè)經(jīng)過(guò)包裝的新組件。靈活性在組合階段相對(duì)更為靈活，他并不規(guī)定被增強(qiáng)組件如何使用它傳遞下去的屬性。在接觸過(guò)React項(xiàng)目后，大多數(shù)人都應(yīng)該已經(jīng)了解過(guò)或則用過(guò)了HOC(High-Order-Components)和FaCC(Functions as Child ...

elliott_hu 2019-08-23 11:44 評(píng)論0 收藏0
深入淺出React高階組件

摘要：博客地址背景知識(shí)在開(kāi)始講述高階組件前，我們先來(lái)回顧高階函數(shù)的定義接收函數(shù)作為輸入，或者輸出另一個(gè)函數(shù)的一類函數(shù)，被稱作高階函數(shù)。博客地址：http://www.luckyjing.com/post... 背景知識(shí) 在開(kāi)始講述高階組件前，我們先來(lái)回顧高階函數(shù)的定義：接收函數(shù)作為輸入，或者輸出另一個(gè)函數(shù)的一類函數(shù)，被稱作高階函數(shù)。對(duì)于高階組件，它描述的便是接受React組件作為輸入，輸出...

yuanzhanghu 2019-08-20 18:20 評(píng)論0 收藏0
React 高階組件（HOC）實(shí)踐

摘要：簡(jiǎn)單來(lái)說(shuō)高階組件就是一個(gè)函數(shù)，它接受一個(gè)組件作為參數(shù)然后返回一個(gè)新組件。主要用于組件之間邏輯復(fù)用。使用由于數(shù)據(jù)請(qǐng)求是異步的，為了不讓用戶看到一片空白，當(dāng)數(shù)據(jù)請(qǐng)求還沒(méi)有返回時(shí)，展示組件。組合函數(shù)，提升代碼可閱讀性。簡(jiǎn)單來(lái)說(shuō)高階組件（HOC）就是一個(gè)函數(shù)，它接受一個(gè)組件作為參數(shù)然后返回一個(gè)新組件。HOC 主要用于組件之間邏輯復(fù)用。比如你寫(xiě)了幾個(gè)組件，他們之間的邏輯幾乎相同，就可以用 HOC 對(duì)...

caiyongji 2019-05-23 13:55 評(píng)論0 收藏0