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

資訊專(zhuān)欄INFORMATION COLUMN

再一次深入了解react的生命周期

pcChao / 1633人閱讀

摘要：一起因記得在年月，曾經(jīng)在自己的博客中寫(xiě)過(guò)一篇，有興趣的朋友可以回顧下如今到現(xiàn)在的版本已經(jīng)發(fā)生了太多的變化，所以又再一次重新認(rèn)識(shí)一下生命周期借用官網(wǎng)的一張圖從上圖中可以大概的看出整個(gè)生命周期的組成和構(gòu)成以及運(yùn)行的順序，掌握這些對(duì)于代碼的書(shū)寫(xiě)

一、起因
記得在2017年4月，曾經(jīng)在自己的博客中寫(xiě)過(guò)一篇react-lifeCycle，有興趣的朋友可以回顧下！如今到現(xiàn)在react的版本已經(jīng)發(fā)生了太多的變化，所以又再一次重新認(rèn)識(shí)一下生命周期

借用官網(wǎng)的一張圖

從上圖中可以大概的看出整個(gè)生命周期的組成和構(gòu)成以及運(yùn)行的順序，掌握這些對(duì)于react代碼的書(shū)寫(xiě)有很重要的作用，比如何時(shí)更新，何時(shí)銷(xiāo)毀，何時(shí)注意性能等等一系列的問(wèn)題，下面要說(shuō)的就是舉例說(shuō)明了；
現(xiàn)在書(shū)寫(xiě)組建基本上都是使用ES6的方法或者是stateless的方法，這里用ES6方法來(lái)講：
1、static defaultProps = {} - 初始化props的地方
2、static propTypes = {} - 檢測(cè)或要求props類(lèi)型的地方

有的將此屬性書(shū)寫(xiě)在組建外部，以前這個(gè)檢測(cè)的方法是在react點(diǎn)下，如今已經(jīng)將這一部分移除來(lái)成為了一個(gè)多帶帶的插件prop-types

3、構(gòu)造方法

constructor(props){
    super(props)
    this.state = {}
}
構(gòu)造方法本身其實(shí)就是構(gòu)造函數(shù)的本身，在ES5中是沒(méi)有繼承的寫(xiě)法的，因此通過(guò)prototype來(lái)達(dá)到目的,例如
    //構(gòu)造函數(shù)People
   function People (name,age){
        this.name = name;
        this.age = age
    }
    People.prototype.sayName = function(){
        return "我的名字是："+this.name;
    }
    let p1 = new People("harrisking",23);
    console.log(p1.sayName()) //我的名字是：harrisking
在ES6中可以這樣來(lái)實(shí)現(xiàn)
    class People{
        //構(gòu)造方法constructor就等于上面的構(gòu)造函數(shù)People
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        sayName(){
            return "我的名字是："+this.name;
        }
    }
    //創(chuàng)建新的子類(lèi)p1
    let p1 = new People("harrisking",23);
    console.log(p1.sayName()) 
上面兩種是一樣的
而super()是用來(lái)繼承父類(lèi)的this的對(duì)象，如果不寫(xiě)就會(huì)得不到this，那么在構(gòu)造函數(shù)中書(shū)寫(xiě)this.state就會(huì)報(bào)錯(cuò)。
有些人會(huì)在構(gòu)造函數(shù)中書(shū)寫(xiě)綁定事件到this上，如下
this.handle = this.handle.bind(this),這在方法中是沒(méi)有寫(xiě)箭頭函數(shù)或者避免在d標(biāo)簽中綁定this（
）
如果要在其中使用this.props就必須要在構(gòu)造函數(shù)中加參數(shù)props

當(dāng)然你也可以不寫(xiě)這個(gè)構(gòu)造函數(shù)，在render中是有this的，這個(gè)是react自帶的

4、componentWillMount
5、render
6、componentDidMount
至此初始化時(shí)應(yīng)該用到的周期就是這些；

二、周期舉例
運(yùn)行時(shí)周期的順序以例子來(lái)講明：
父組建IndexPage 子組建Son

直接來(lái)看瀏覽器的運(yùn)行結(jié)果

初始化階段的順序?yàn)閣ill --- render ---- Mount遇到子組建先執(zhí)行子在執(zhí)行父

當(dāng)我們點(diǎn)擊Welcome to Here的時(shí)候周期順序如圖

在父組建中調(diào)用setState后就會(huì)走render周期，子組建就會(huì)接收新的props進(jìn)入componentWillReceiveProps周期，然后決定是否進(jìn)行更新子組建周期shouldComponentUpdate,返回true則更新，返回false不跟新，這里一般用于優(yōu)化作用，當(dāng)返回true時(shí)進(jìn)入即將更新階段componentWillUpdate階段然后render，最后進(jìn)入更新后階段componentDidUpdate
(

shouldComponentUpdate周期用于優(yōu)化react項(xiàng)目的性能，可以選擇更新或不更新，官網(wǎng)也推出了react的另外一個(gè)屬性PureComponent,
即class Son extent React.PureComponent，用這個(gè)屬性來(lái)代替手寫(xiě)shouldComponentUpdate, 但是它只是對(duì)屬性進(jìn)行淺比較，如果屬性的層級(jí)太深就只能進(jìn)行手動(dòng)了

)

當(dāng)我們點(diǎn)擊Son組建中的button的時(shí)候，看看內(nèi)部周期是怎樣的順序

周期仍然于更新一樣，這里不在贅述了

三、卸載周期 componentWillUnmount
常在此周期中進(jìn)行定時(shí)器的銷(xiāo)毀，或者引用外部對(duì)象的銷(xiāo)毀（destroy）;

每次熟悉一遍就有一遍的收獲！學(xué)以致用，知情分享！樂(lè)在其中！

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

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

相關(guān)文章

  • 深入淺出react和redux個(gè)人閱讀記錄

    摘要：閱讀深入淺出和本書(shū)值得記錄的地方源碼第二章設(shè)計(jì)高質(zhì)量的組件檢查雖然能夠在開(kāi)發(fā)階段發(fā)現(xiàn)代碼中的問(wèn)題，但是放在產(chǎn)品環(huán)境中就不大合適現(xiàn)有的就具有這個(gè)功能，可以通過(guò)安裝，但是應(yīng)該確保只在發(fā)布產(chǎn)品代碼時(shí)使用它。 閱讀深入淺出react和redux本書(shū)值得記錄的地方 github源碼：https://github.com/mocheng/react-and-redux 第二章 設(shè)計(jì)高質(zhì)量的 Rea...

    xorpay 評(píng)論0 收藏0

  • React 深入系列４：組件的生命周期

    摘要：因?yàn)槭巧钊胂盗形恼拢疚牟粫?huì)仔細(xì)介紹每個(gè)生命周期方法的使用，而是會(huì)重點(diǎn)講解在使用組件生命周期時(shí)，經(jīng)常遇到的疑問(wèn)和錯(cuò)誤使用方式。父組件發(fā)生更新導(dǎo)致的組件更新，生命周期方法的調(diào)用情況同上所述。 文：徐超，《React進(jìn)階之路》作者授權(quán)發(fā)布，轉(zhuǎn)載請(qǐng)注明作者及出處 React 深入系列4：組件的生命周期 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深...

    warnerwu 評(píng)論0 收藏0

  • React 深入系列4：組件的生命周期

    摘要：因?yàn)槭巧钊胂盗形恼拢疚牟粫?huì)仔細(xì)介紹每個(gè)生命周期方法的使用，而是會(huì)重點(diǎn)講解在使用組件生命周期時(shí)，經(jīng)常遇到的疑問(wèn)和錯(cuò)誤使用方式。父組件發(fā)生更新導(dǎo)致的組件更新，生命周期方法的調(diào)用情況同上所述。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 組件是構(gòu)建React應(yīng)用的基本單位，組件需要具備數(shù)據(jù)...

    alexnevsky 評(píng)論0 收藏0

  • React.js 小書(shū) Lesson20 - 更新階段的組件生命周期

    摘要：所以對(duì)于組件更新階段的組件生命周期，我們簡(jiǎn)單提及并且提供一些資料給大家。這里為了知識(shí)的完整，補(bǔ)充關(guān)于更新階段的組件生命周期你可以通過(guò)這個(gè)方法控制組件是否重新渲染。大家對(duì)這更新階段的生命周期比較感興趣的話可以查看官網(wǎng)文檔。 React.js 小書(shū) Lesson20 - 更新階段的組件生命周期 本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

    Yumenokanata 評(píng)論0 收藏0

  • 虛擬DOM內(nèi)部是如何工作的

    摘要：但是它與里大部分的概率是保持一致的。但是如何將轉(zhuǎn)換成函數(shù)的調(diào)用呢就是干這件事情的。好了，讓我們看看是如何工作的。下面的圖片在流程圖中高亮了一個(gè)組件是如何工作的最后希望這篇文章能幫助你理解是如何工作的至少在中 英文原文鏈接 Virtual DOM很神奇，同時(shí)也比較復(fù)雜，難以理解。react,preact和相似的js庫(kù)都使用了virtual dom。然而，我找不到任何好的文章或者文檔，可以...

    hiYoHoo 評(píng)論0 收藏0

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

0條評(píng)論

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