七進七出React高階組件

miguel.jiang 發(fā)布于2019-08-21 17:21 / 2639人閱讀

摘要：為了提高代碼的復(fù)用性和可維護性，高階函數(shù)應(yīng)運而生。使用過的同學(xué)，不知道有沒有使用過，高階函數(shù)的作用和它是一樣的。高階函數(shù)在編程中扮演的角色就是火鍋鍋底的角色，它有公用的方法和屬性，而各種組件就是肉和蔬菜。

為什么要使用高階組件？

想想以前用原生和jQuery的項目，上千行的code映入眼簾，瞬間有種昏死過去的沖動。代碼難以維護，改一個bug可能出現(xiàn)N個bug，真的是很痛苦。于是乎組件化成為了當(dāng)前前端開發(fā)的主流技術(shù)。angular、vue和react很好的幫我們實現(xiàn)了組件化。

但是我們常常也會遇到一種情況，就是兩個組件往往有很多的重復(fù)代碼(可能是相同的屬性，也可能是相同的方法)。例如，在登錄和注冊組件中，都會有用戶名和密碼，以及對他們的校驗規(guī)則。為了提高代碼的復(fù)用性和可維護性，React高階函數(shù)應(yīng)運而生。

React之前對此的解決方案是mixin，但這造成和很多不必要的問題，后來就被廢棄掉了。使用過vue的同學(xué)，不知道有沒有使用過mixin，react高階函數(shù)的作用和它是一樣的。

高階組件到底是個什么東西？

高階組件其實是一個函數(shù)，它并不是一個組件，我們需要向它傳遞一些參數(shù)(想要操作的組件、屬性)。這么說起來它其實一點也不高階，它的作用就是存儲一些公共的屬性和方法。

我們經(jīng)常幾個人吃過一個鍋底的那種火鍋，鍋底里有火鍋底料和各種佐料，我們把肉和蔬菜等放進去涮一下，就可以美美的飽餐一頓。高階函數(shù)在react編程中扮演的角色就是火鍋鍋底的角色，它有公用的方法和屬性，而各種組件就是肉和蔬菜。如果是一個人一個鍋的火鍋就像沒有經(jīng)過封裝的code，代碼量重復(fù)且維護困難。

如何實現(xiàn)高階函數(shù)？

我們先來看一段可以使用高階函數(shù)的代碼:

這里有一個Second組件，它負責(zé)展示用戶名username

export class Second extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ""
        }
    }
    componentWillMount() {
        let username = localStorage.getItem("username");
        this.setState({
            username: username
        });
    }
    render() {
        return(
            
                Second Page
                Hi {this.state.username}
            
        )
    }
}

下面是一個Third組件，它也負責(zé)展示用戶名

export class Third extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ""
        }
    }
    componentWillMount() {
        let username = localStorage.getItem("username");
        this.setState({
            username: username
        });
    }
    render() {
        return(
            
                Third Page
                Hi {this.state.username}
                我今年18歲了
            
        )
    }
}

我們看到這兩個組件除了名稱以外，其余大量的代碼是一樣的，我們完全可以考慮將它們通用的代碼提取出來。下面就是高階組件出場的時候了。

高階組件可以寫成這樣

export const HighOrderComponent = (WrapComponent, title) => {
    return class HOC extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                username: ""
            }
        }
        componentWillMount() {
            let username = localStorage.getItem("username");
            this.setState({
                username: username
            });
        }
        static displayName = `HOC(${getDisplayName(WrapComponent)})`;
        render() {
            return(
                
                    {title}
                    
                
            )
        }
    }
}

WrapComponent 是我們要操作的組件

title 是它們的標(biāo)題參數(shù)

username 就是我們常用的props，它負責(zé)向組件傳遞值，我們下面還會提到

使用高階組件之后我們要對Second和Third組件進行修改，修改如下

class Second extends React.Component {
    render() {
        return(
            
                Hi {this.props.username}
                曉不曉得哪里好耍
            
        )
    }
}
export const HighOrderSecond = HighOrderComponent(Second, "Second Page");

class Third extends React.Component {

    render() {
        return(
            
                Hi {this.props.username}
            
        )
    }
}
export const HighOrderThird = HighOrderComponent(Third, "Third Page");

很多同學(xué)可能會問，export出去的常量是干什么用的，它就是高階組件對組件進行封裝之后的一個全新的組件，是兩者的結(jié)合。到此，我們在其它頁面引用組件就不再是引用Second和Third組件了，要引用的就是HighOrderSecond和HighOrderThird了。

細心的同學(xué)可能會發(fā)現(xiàn)一些不同的地方，對于Second和Third的公共legend提取出去了，但并沒有將h2對應(yīng)得標(biāo)題提取出去，這里只是想給大家說一下，在對組件使用高階組件包裹之后，高階組件就變成了組件的父組件，它的state可以通過props的方式向子組件傳遞，username就是這樣。我們在chrome的react插件中可以觀察到這一點

HOC已經(jīng)將Second組件包裹起來，成為了它的父組件，它上面的match和location是我使用了react-router的緣故，我們可以不用去管它。它的state——username作為props傳給了Second

今天給大家簡單的介紹了React高階組件的一些知識，后續(xù)還會再深入的挖掘React高階組件的知識和大家分享，希望對大家有幫助。文章轉(zhuǎn)自個人掘金賬號，轉(zhuǎn)載請注明出處，謝謝