成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

react生命周期

Jason_Geng / 671人閱讀

摘要：生命周期，一直只關(guān)心自己常用的那幾個(gè)，雖然基本能解決的問(wèn)題，但是當(dāng)被問(wèn)到的時(shí)候，說(shuō)的不清不楚還是讓我很慚愧，所以今天我就專(zhuān)門(mén)來(lái)梳理一下的生命周期執(zhí)行場(chǎng)景執(zhí)行之前詳細(xì)不會(huì)觸發(fā)重復(fù)渲染，只執(zhí)行一次執(zhí)行場(chǎng)景之后之后詳情只能通過(guò)訪問(wèn)數(shù)據(jù)不能修改可

react生命周期，一直只關(guān)心自己常用的那幾個(gè)，雖然基本能解決99%的問(wèn)題，但是當(dāng)被問(wèn)到的時(shí)候，說(shuō)的不清不楚還是讓我很慚愧，所以今天我就專(zhuān)門(mén)來(lái)梳理一下react的生命周期

1、componentWillMount()

執(zhí)行場(chǎng)景：render()執(zhí)行之前

詳細(xì)： setState()不會(huì)觸發(fā)re-render重復(fù)渲染，只執(zhí)行一次

2、render()

執(zhí)行場(chǎng)景： componentWillMount() 之后/ componentWillReceive(nextProps, nextState)之后

詳情： 只能通過(guò)this.props,this.state訪問(wèn)數(shù)據(jù)不能修改、 可以反回null，false 或則任何React組件、
不能改變組件狀態(tài)、 不能修改Dom的輸出

注意：render
方法反回的不是真實(shí)的Dom元素，而是一個(gè)虛擬的表現(xiàn)，類(lèi)似于一個(gè)Dom-Tree的結(jié)構(gòu)對(duì)象，react之所以效率高就是這個(gè)原因

3、componentDidMount()

執(zhí)行場(chǎng)景：render()以后立即執(zhí)行

詳情：可以對(duì)Dom進(jìn)行操作 通常在這里加載服務(wù)器數(shù)據(jù) 可以setState觸發(fā)重新渲染 只執(zhí)行一次

4、componentWillReceiveProps(nextProps)

執(zhí)行場(chǎng)景：在已經(jīng)掛載的組件接收到新的props時(shí)觸發(fā)，可以理解為除了第一次生命周期（componentWillMount ->
render -> componentDidMount）之后的生命周期觸發(fā)

詳情： 只有當(dāng)從外部傳入的props發(fā)生變化時(shí)才會(huì)觸發(fā)，setState是不會(huì)觸發(fā)的

注意：
由于組件可能會(huì)在props傳入即使沒(méi)有發(fā)生改變也會(huì)觸發(fā)重新渲染，所以如果你想自己處理改變最好對(duì)當(dāng)前props值和下一次值進(jìn)行比較，避免觸發(fā)不必要的渲染

5、shouldComponentUpdate(nextProps,nextState)

執(zhí)行場(chǎng)景：在接收新的props或者state時(shí)觸發(fā)

詳情：這個(gè)函數(shù)的作用是為了讓我們自己能夠控制組件是否重新渲染從而優(yōu)化組件，默認(rèn)返回true表示需要重新渲染

注意：首次渲染時(shí)不會(huì)觸發(fā)， 函數(shù)如果返回false是不會(huì)觸發(fā)重新渲染的（componentWillUpdata -> render -> componentDidUpdate）是不會(huì)被觸發(fā)的

6、componentWillUpdate(nextProps, nextState)

執(zhí)行場(chǎng)景： props或state發(fā)生改變時(shí)，shouldComponentUpdata 返回true時(shí)觸發(fā)

注意：不可以在這里調(diào)用setState 如果需要響應(yīng)props可以到componentWillReceiveProps()中做響應(yīng)

7、componentDidUpdate(prevProps, prevState)

執(zhí)行場(chǎng)景： 在componentWillUpdate -> render 以后

注意： 該方法可以操作Dom，但是組件初始時(shí)不會(huì)調(diào)用

8、componentWillUnmount()

執(zhí)行場(chǎng)景：在組件卸載或銷(xiāo)毀之前調(diào)用

詳情： 這個(gè)方法主要用于一些清理工作，比如無(wú)效的timers, interval, 或則取消網(wǎng)絡(luò)請(qǐng)求
清理任何componentWillMount()中創(chuàng)建的Dom元素。

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

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

相關(guān)文章

  • React專(zhuān)題：生命周期

    摘要：而生命周期鉤子，就是從生到死過(guò)程中的關(guān)鍵節(jié)點(diǎn)。異步渲染下的生命周期花了兩年時(shí)間祭出渲染機(jī)制。目前為這幾個(gè)生命周期鉤子提供了別名，分別是將只提供別名，徹底廢棄這三個(gè)大活寶。生命周期鉤子的最佳實(shí)踐是在這里初始化。 本文是『horseshoe·React專(zhuān)題』系列文章之一，后續(xù)會(huì)有更多專(zhuān)題推出來(lái)我的 GitHub repo 閱讀完整的專(zhuān)題文章來(lái)我的 個(gè)人博客 獲得無(wú)與倫比的閱讀體驗(yàn) 生命周期...

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

  • 捋一捋React的生命周期

    摘要：卸載階段組件卸載和銷(xiāo)毀老版生命周期之前的生命周期初始化階段涉及個(gè)鉤子函數(shù)這些方法會(huì)在組件初始化的時(shí)候被調(diào)用，只跟實(shí)例的創(chuàng)建有關(guān)。 前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現(xiàn)在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數(shù)混雜在一起，難免會(huì)讓許多新來(lái)者有很多困惑。所以這一篇我們來(lái)...

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

  • ReactV16.3，即將更改的生命周期

    摘要：我們目前的計(jì)劃是為不安全生命周期引入別名，和。從現(xiàn)在開(kāi)始，只有新的生命周期名稱(chēng)將起作用。從版本開(kāi)始，更新以響應(yīng)更改的推薦方法是使用新的靜態(tài)生命周期。 注釋?zhuān)罕疚氖歉鶕?jù)React的官方博客翻譯而成（文章地址：https://reactjs.org/blog/2018...）。主要講述了React之后的更新方向，以及對(duì)之前生命周期所出現(xiàn)的問(wèn)題的總結(jié)，之后的React將逐步棄用一些生命周期和...

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

  • React組件生命周期詳解

    摘要：組件生命周期構(gòu)造方法是對(duì)類(lèi)的默認(rèn)方法，通過(guò)命令生成對(duì)象實(shí)例時(shí)自動(dòng)調(diào)用該方法。該生命周期可以發(fā)起異步請(qǐng)求，并。后廢棄該生命周期，可以在中完成設(shè)置渲染組件是一個(gè)組件必須定義的生命周期，用來(lái)渲染。該生命周期內(nèi)可以進(jìn)行。 React組件生命周期 constructor( ) 構(gòu)造方法 constructor是ES6對(duì)類(lèi)的默認(rèn)方法，通過(guò) new 命令生成對(duì)象實(shí)例時(shí)自動(dòng)調(diào)用該方法。并且，該方法是...

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

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

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

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

  • React組件生命周期

    摘要：組件生命周期此文章適合之前的版本，，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。每個(gè)生命周期階段調(diào)用的鉤子函數(shù)會(huì)略有不同。 React組件生命周期 此文章適合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。所有如果在React@17 發(fā)布之前，這篇文章還是適用的。新的生命周期請(qǐng)看官...

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

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

0條評(píng)論

閱讀需要支付1元查看
<