成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

QLQ / 787人閱讀

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

0x000 概述

高階函數(shù)組件...還是一個函數(shù)，和函數(shù)組件不同的是他返回了一個完整的組件...他返回了一個class?。?！

0x001 直接上栗子

照常，先寫個App組件，外部傳入一個theme

class App extends React.Component {
    render() {
        return (
            

                App theme: {this.props.theme}
            

        );
    }
}

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

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

調(diào)用組件

let ThemeApp = withTheme(App)

渲染

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

效果

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

0x003 總結(jié)

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99705.html

相關(guān)文章

  • 動手寫個React高階組件

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

    xiaokai 評論0 收藏0

  • 寫給自己的React HOC(高階組件)手冊

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

    W4n9Hu1 評論0 收藏0

  • React中的函數(shù)子組件(FaCC)和高階組件(HOC)

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

    elliott_hu 評論0 收藏0

  • 深入淺出React高階組件

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

    yuanzhanghu 評論0 收藏0

  • React 高階組件（HOC）實踐

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

    caiyongji 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<