国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

更快助你弄懂React-高階組件

dreamGong / 927人閱讀

摘要:等價(jià)于是一個(gè)返回函數(shù)的函數(shù)就是個(gè)高階函數(shù)返回的函數(shù)就是一個(gè)高階組件,該高階組件返回一個(gè)與關(guān)聯(lián)起來的新組件的也是一樣的總結(jié)一下高階組件是對(duì)代碼進(jìn)行更高層次重構(gòu)的好方法,如果你想精簡(jiǎn)你的和生命周期方法,那么高階組件可以幫助你提取出可重用的函數(shù)。

談到react,我們第一個(gè)想到的應(yīng)該是組件,在react的眼中可真的是萬(wàn)物皆組件。就連我們獲取數(shù)據(jù)用到的axios也可以用組件來表示...比如,我們可以這樣封裝

{}} /* called on success of axios request - optional */
  onLoading={()=>{}} /* called on start of axios request - optional */
  onError=(error)=>{} /* called on error of axios request - optional */
/>

在項(xiàng)目中我們可以這樣寫

import { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from "react-axios"
...
render() {
  return (
    
{(error, response, isLoading, makeRequest, axios) => { if(error) { return (
Something bad happened: {error.message}
) } else if(isLoading) { return (
Loading...
) } else if(response !== null) { return (
{response.data.message}
) } return (
Default message before request is made.
) }}
) }

有點(diǎn)過分了...至少我是覺得還是要根據(jù)個(gè)人的代碼習(xí)慣來吧,如果所有組件都是這么處理請(qǐng)求的,包括一些簡(jiǎn)單的get請(qǐng)求,我覺得真的沒這個(gè)必要,并且我們的一些通用API也不太好統(tǒng)一管理

那么,高階組件到底是什么?

a higher-order component is a function that takes a component and returns a new component.

右鍵翻譯 ------> 高階組件就是一個(gè)函數(shù),且該函數(shù)接受一個(gè)組件作為參數(shù),并返回一個(gè)新的組件。
嗯,看起來就是這么簡(jiǎn)單,其實(shí)用起來也是

1、具體來說一下,我們先用高階函數(shù)來舉個(gè)例子,一個(gè) showUserPermit, 一個(gè)showUserVipInfo,兩個(gè)函數(shù)先從localStorage讀取了userVIP,之后針對(duì)userVIP做了一些處理。

function showUserPermit() {
   let vip = localStorage.getItem("u_V");
   console.log(`您可以享受的${u_V}的特權(quán)...`);
}

function showUserVipInfo() {
   let vip = localStorage.getItem("u_V");
   console.log(`您當(dāng)前VIP等級(jí)為${u_V},升級(jí)立刻...`);
}

showUserPermit();
showUserVipInfo();

2、我們發(fā)現(xiàn)了兩個(gè)API中有兩個(gè)完全一樣的代碼,很冗余,這樣不好,我們改一下吧

function showUserPermit(u_V) {
   console.log(`您可以享受的${u_V}的特權(quán)...`);
}

function showUserVipInfo(u_V) {
   console.log(`您當(dāng)前VIP等級(jí)為${u_V},升級(jí)立刻...`);
} 

3、這樣寫看上去確實(shí)簡(jiǎn)單了一些,但是這兩個(gè)API要想保證功能完全必須依賴參數(shù)u_V,所有在調(diào)用這兩個(gè)函數(shù)之前我們都必須要拿到這個(gè)參數(shù),這樣未免有點(diǎn)耦合性,我們?cè)俅胃脑?br> function showUserPermit(u_V) {

   console.log(`您可以享受的${u_V}的特權(quán)...`);
}

function showUserVipInfo(u_V) {
   console.log(`您當(dāng)前VIP等級(jí)為${u_V},升級(jí)立刻...`);
}

function wrapU_V(wrappedFunc) {
    let newFunc = () => {
        let vip = localStorage.getItem("u_V");
        wrappedFunc(vip);
};
    return newFunc;
}

module.exports = { 
    showUserPermit: wrapU_V(showUserPermit), 
    showUserVipInfo: wrapU_V(showUserVipInfo)
}

4、wrapU_V就是一個(gè)沒有任何副作用的高階函數(shù),那么他的意義是什么?又做了什么?它幫我們處理了u_V,并且調(diào)用了目標(biāo)函數(shù)(函數(shù)參數(shù)),這樣當(dāng)你再次使用導(dǎo)出的showUserPermit的時(shí)候根本不必要去關(guān)心u_V高低是怎么來的,到底需求什么外部條件,你只要知道它能幫我實(shí)現(xiàn)我想要做的事情就可以了!同時(shí)省去了每一次調(diào)用前都先要看一下它的參數(shù)是什么?怎么來?甚至根本不用關(guān)心wrapU_V內(nèi)部是如何實(shí)現(xiàn)的,Array.map,setTimeout都可以稱為高階函數(shù)

高階組件
高階組件就是一個(gè)沒有副作用的純函數(shù),對(duì)就是一個(gè)函數(shù)
我們將上面的例子用component來重構(gòu)一下

import React, {Component} from "react"
...

class showUserPermit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            VIP: ""
        }
    }

    componentWillMount() {
        let VIP = localStorage.getItem("u_V");
        this.setState({
            VIP
        })
    }

    render() {
        return (
            
showUserPermit... {this.state.VIP}
) } } export default showUserPermit; /* - */ import React, {Component} from "react" ... class showUserVipInfo extends Component { constructor(props) { super(props); this.state = { VIP: "" } } componentWillMount() { let VIP = localStorage.getItem("u_V"); this.setState({ VIP }) } render() { return (
showUserVipInfo... {this.state.VIP}
) } } export default showUserVipInfo;

剛才發(fā)現(xiàn)的問題都可以映射在這兩個(gè)組件里了
按照上面的思路我們做一個(gè)處理

import React, {Component} from "react"

module.exports = Wrap: (WrappedComponent) => {
    class reComponent extends Component {
        constructor() {
            super();
            this.state = {
                VIP: ""
            }
        }

        componentWillMount() {
            let VIP = localStorage.getItem("u_V");
            this.setState({
                VIP
            })
        }

        render() {
            return 
        }
    }

    return reComponent
}

再來簡(jiǎn)化一下 showUserVipInfo和showUserPermit組件

import React, {Component} from "react";
import {Wrap} as templete from "wrapWithUsername";

class showUserPermit extends Component {

    render() {
        return (
            
showUserPermit {this.props.username}
) } } showUserPermit = templete(showUserPermit); export default showUserPermit; /*--*/ import React, {Component} from "react"; import {Wrap} as templete from "wrapWithUsername"; class showUserVipInfo extends Component { render() { return (
showUserVipInfo {this.props.username}
) } } showUserPermit = templete(showUserPermit); export default showUserVipInfo;

并且高階組件中可以分布多個(gè)目標(biāo)組件,舉一個(gè)我們項(xiàng)目中的例子


這里面右上角的時(shí)間選擇組件以及echarts組件是兩種不同身份特有的一些行為和樣式,其它的完全是一樣的,包括state以及共用方法都一模一樣。上代碼

render() {
  return (
    
...
<**GenTimerComponent** receiveTimeChange={this.getData.bind(this)}/>
...
<**EchartsComponent** chartData={this.state.chartData}/>
)

其中GenTimerComponent,和EchartsComponent都是目標(biāo)組件,我們這樣導(dǎo)出

豁然開朗了吧,其實(shí)就是把兩個(gè)組件相同的地方或者都可能用到的地方抽離出來,說句題外話,其實(shí)本來是"高階組件"嵌套了目標(biāo)組件,但是重新生成的新組建反倒是繼承了目標(biāo)組件,看起來是一種控制反轉(zhuǎn),和Vue中的extend+minix也比較像,通過繼承目標(biāo)組件,除了一些靜態(tài)方法,包括生命周期,state,fun,我們都可得到
現(xiàn)在理解react-redux的connect函數(shù)~
把redux的state和action創(chuàng)建函數(shù),通過props注入給了Component。
你在目標(biāo)組件Component里面可以直接用this.props去調(diào)用redux state和action創(chuàng)建函數(shù)了。

ConnectedComment = connect(mapStateToProps, mapDispatchToProps)(Component);  

等價(jià)于

// connect是一個(gè)返回函數(shù)的函數(shù)(就是個(gè)高階函數(shù))
const enhance = connect(mapStateToProps, mapDispatchToProps);
// 返回的函數(shù)就是一個(gè)高階組件,該高階組件返回一個(gè)與Redux store
// 關(guān)聯(lián)起來的新組件
const ConnectedComment = enhance(Component);        

antd的Form也是一樣的

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);   

總結(jié)一下: 高階組件是對(duì)React代碼進(jìn)行更高層次重構(gòu)的好方法,如果你想精簡(jiǎn)你的state和生命周期方法,那么高階組件可以幫助你提取出可重用的函數(shù)。一般來說高階組件能完成的用組件嵌套+繼承也可以,用嵌套+繼承的方式理解起來其實(shí)更容易一點(diǎn),特別是去重構(gòu)一個(gè)復(fù)雜的組件時(shí),通過這種方式往往更快,拆分起來更容易。至于到底用哪個(gè)最佳還要具體看業(yè)務(wù)場(chǎng)景,歡迎交流探討

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

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

相關(guān)文章

  • 更快助你弄懂React-高階組件

    摘要:等價(jià)于是一個(gè)返回函數(shù)的函數(shù)就是個(gè)高階函數(shù)返回的函數(shù)就是一個(gè)高階組件,該高階組件返回一個(gè)與關(guān)聯(lián)起來的新組件的也是一樣的總結(jié)一下高階組件是對(duì)代碼進(jìn)行更高層次重構(gòu)的好方法,如果你想精簡(jiǎn)你的和生命周期方法,那么高階組件可以幫助你提取出可重用的函數(shù)。 談到react,我們第一個(gè)想到的應(yīng)該是組件,在react的眼中可真的是萬(wàn)物皆組件。就連我們獲取數(shù)據(jù)用到的axios也可以用組件來表示...比如,我...

    qylost 評(píng)論0 收藏0
  • 更快助你弄懂React-高階組件

    摘要:等價(jià)于是一個(gè)返回函數(shù)的函數(shù)就是個(gè)高階函數(shù)返回的函數(shù)就是一個(gè)高階組件,該高階組件返回一個(gè)與關(guān)聯(lián)起來的新組件的也是一樣的總結(jié)一下高階組件是對(duì)代碼進(jìn)行更高層次重構(gòu)的好方法,如果你想精簡(jiǎn)你的和生命周期方法,那么高階組件可以幫助你提取出可重用的函數(shù)。 談到react,我們第一個(gè)想到的應(yīng)該是組件,在react的眼中可真的是萬(wàn)物皆組件。就連我們獲取數(shù)據(jù)用到的axios也可以用組件來表示...比如,我...

    libxd 評(píng)論0 收藏0
  • 更快助你弄懂React-高階組件

    摘要:等價(jià)于是一個(gè)返回函數(shù)的函數(shù)就是個(gè)高階函數(shù)返回的函數(shù)就是一個(gè)高階組件,該高階組件返回一個(gè)與關(guān)聯(lián)起來的新組件的也是一樣的總結(jié)一下高階組件是對(duì)代碼進(jìn)行更高層次重構(gòu)的好方法,如果你想精簡(jiǎn)你的和生命周期方法,那么高階組件可以幫助你提取出可重用的函數(shù)。 談到react,我們第一個(gè)想到的應(yīng)該是組件,在react的眼中可真的是萬(wàn)物皆組件。就連我們獲取數(shù)據(jù)用到的axios也可以用組件來表示...比如,我...

    xushaojieaaa 評(píng)論0 收藏0
  • 更快助你弄懂React-高階組件

    摘要:等價(jià)于是一個(gè)返回函數(shù)的函數(shù)就是個(gè)高階函數(shù)返回的函數(shù)就是一個(gè)高階組件,該高階組件返回一個(gè)與關(guān)聯(lián)起來的新組件的也是一樣的總結(jié)一下高階組件是對(duì)代碼進(jìn)行更高層次重構(gòu)的好方法,如果你想精簡(jiǎn)你的和生命周期方法,那么高階組件可以幫助你提取出可重用的函數(shù)。 談到react,我們第一個(gè)想到的應(yīng)該是組件,在react的眼中可真的是萬(wàn)物皆組件。就連我們獲取數(shù)據(jù)用到的axios也可以用組件來表示...比如,我...

    Keven 評(píng)論0 收藏0
  • React 深入系列6:高階組件

    摘要:在項(xiàng)目中用好高階組件,可以顯著提高代碼質(zhì)量。高階組件的定義類比于高階函數(shù)的定義。高階函數(shù)接收函數(shù)作為參數(shù),并且返回值也是一個(gè)函數(shù)。 React 深入系列,深入講解了React中的重點(diǎn)概念、特性和模式等,旨在幫助大家加深對(duì)React的理解,以及在項(xiàng)目中更加靈活地使用React。 1. 基本概念 高階組件是React 中一個(gè)很重要且比較復(fù)雜的概念,高階組件在很多第三方庫(kù)(如Redux)中都...

    2shou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<