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

資訊專欄INFORMATION COLUMN

幫你理清React的生命周期

itvincent / 1444人閱讀

摘要：推薦使用生命周期而不是該函數(shù)。這一生命周期返回的任何值將會(huì)作為參數(shù)被傳遞給。在更新發(fā)生后立即被調(diào)用。

這是一個(gè)從 印記中文 | react官方文檔 提取總結(jié)的，算是幫自己理清并且強(qiáng)化記憶React的生命周期，以便以后編寫組件的時(shí)候能夠有更清晰的思路。本文如有紕漏，歡迎指正

整體上來講，React生命周期分為了 掛載（裝配） 、 更新 、 卸載 以及 捕錯(cuò) 四個(gè)狀態(tài)階段。每種狀態(tài)里需要執(zhí)行若干個(gè)生命周期函數(shù)，這些函數(shù)可能會(huì)在不同的階段里重新被調(diào)用。

用流程圖來形象地歸納總結(jié)如下：

掛載（裝配）

這些方法會(huì)在組件實(shí)例創(chuàng)建和插入DOM中時(shí)被調(diào)用

1.constructor()

構(gòu)造函數(shù)會(huì)在裝配前調(diào)用。

constructor(props){
    //...
}
2.static getDerivedStateFromProps()

組件實(shí)例化后和接受新屬性時(shí)調(diào)用，返回一個(gè)對(duì)象以更新狀態(tài)，或返回null表明不需要更新狀態(tài)

static getDerivedStateFromProps(nextProps,prevState)
3.componentWillMount()/UNSAFE_componentWillMount()

[UNSAFE_]componentWillMount()：裝配前立刻調(diào)用，發(fā)生在render()之前

17版前，這一生命周期函數(shù)名字都可以寫為componentWillMount()
4.render()

必須的鉤子函數(shù)，不應(yīng)該改變組件的狀態(tài)，且不與瀏覽器交互

5.componentDidMount()

componentDidMount()：組件裝配后立刻調(diào)用，實(shí)現(xiàn)遠(yuǎn)端網(wǎng)絡(luò)請(qǐng)求的地方

更新

屬性或狀態(tài)發(fā)生改變后，會(huì)觸發(fā)一次更新，組件重新渲染，下述方法會(huì)被調(diào)用。

1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()

在掛載了的組件接收到新屬性前調(diào)用。推薦使用getDerivedStateFromProps生命周期而不是該函數(shù)。

UNSAFE_componentWillReceiveProps(nextProps)
2. static getDerivedStateFromProps()

見掛載章節(jié)該鉤子

3. shouldComponentUpdate()

在掛載了的組件屬性變化和狀態(tài)變化時(shí)調(diào)用。通過控制返回的boolean值告訴React是否重新渲染該組件。

無法控制子組件的重新渲染與否

4. componentWillUpdate() / UNSAFE_componentWillUpdate()

當(dāng)接收到新屬性或狀態(tài)時(shí)，UNSAFE_componentWillUpdate()在渲染前被立即調(diào)用

UNSAFE_componentWillUpdate(nextProps, nextState)
注意

若shouldComponentUpdate()返回false，UNSAFE_componentWillUpdate()將不會(huì)被調(diào)用。
5. render()

見掛載章節(jié)該鉤子

6. getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate()在最新的渲染輸出提交給DOM前將會(huì)立即調(diào)用。它讓你的組件能在當(dāng)前的值可能要改變前獲得它們。這一生命周期返回的任何值將會(huì)作為參數(shù)被傳遞給componentDidUpdate()。

getSnapshotBeforeUpdate(prevProps, prevState)
7. componentDidUpdate()

在更新發(fā)生后立即被調(diào)用。適合發(fā)送請(qǐng)求的地方

componentDidUpdate(prevProps, prevState)
卸載 1. componentWillUnmount()

componentWillUnmount()在組件被卸載和銷毀之前立刻調(diào)用。可以在該方法里處理任何必要的清理工作，例如解綁定時(shí)器，取消網(wǎng)絡(luò)請(qǐng)求，清理任何在componentDidMount環(huán)節(jié)創(chuàng)建的DOM元素。

錯(cuò)誤處理 1. componentDidCatch()

錯(cuò)誤邊界捕捉發(fā)生在子組件樹中任意地方的JavaScript錯(cuò)誤,一個(gè)錯(cuò)誤邊界并不能捕捉它自己內(nèi)部的錯(cuò)誤。

componentDidCatch(error, info)

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

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

相關(guān)文章

  • 幫你理清React的生命周期

    摘要：推薦使用生命周期而不是該函數(shù)。這一生命周期返回的任何值將會(huì)作為參數(shù)被傳遞給。在更新發(fā)生后立即被調(diào)用。 這是一個(gè)從 印記中文 | react官方文檔 提取總結(jié)的，算是幫自己理清并且強(qiáng)化記憶React的生命周期，以便以后編寫組件的時(shí)候能夠有更清晰的思路。本文如有紕漏，歡迎指正 整體上來講，React生命周期分為了 掛載（裝配） 、 更新 、 卸載 以及 捕錯(cuò) 四個(gè)狀態(tài)階段。每種狀態(tài)里需要...

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

  • 捋一捋React的生命周期

    摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個(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ì)讓許多新來者有很多困惑。所以這一篇我們來...

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

  • 淺談React Fiber

    摘要：因?yàn)榘姹緦⒄嬲龔U棄這三生命周期到目前為止，的渲染機(jī)制遵循同步渲染首次渲染，更新時(shí)更新時(shí)卸載時(shí)期間每個(gè)周期函數(shù)各司其職，輸入輸出都是可預(yù)測(cè)，一路下來很順暢。通過進(jìn)一步觀察可以發(fā)現(xiàn)，預(yù)廢棄的三個(gè)生命周期函數(shù)都發(fā)生在虛擬的構(gòu)建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景 前段時(shí)間準(zhǔn)備前端招聘事項(xiàng)...

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

  • React Fiber 架構(gòu)理解

    摘要：架構(gòu)理解引用原文是核心算法正在進(jìn)行的重新實(shí)現(xiàn)。構(gòu)建的過程就是的過程，通過來調(diào)度執(zhí)行一組任務(wù)，每完成一個(gè)任務(wù)后回來看看有沒有插隊(duì)的更緊急的，把時(shí)間控制權(quán)交還給主線程，直到下一次回調(diào)再繼續(xù)構(gòu)建。 React Fiber 架構(gòu)理解 引用原文：React Fiber ArchitectureReact Fiber is an ongoing reimplementation of Reacts...

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

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

0條評(píng)論

itvincent

男|高級(jí)講師

TA的文章

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