js手札-reactjs生命周期

noONE 發(fā)布于2019-08-21 10:53 / 2538人閱讀

摘要：生命狀態(tài)已插入真實(shí)節(jié)點(diǎn)正在重新渲染已經(jīng)移出真實(shí)節(jié)點(diǎn)大致順序兩個(gè)掛載服務(wù)端和客戶端都只調(diào)用一次在初始化渲染之前調(diào)用所以，如果這里調(diào)用，則會(huì)在中感知到的變化。

生命狀態(tài)：

Mounting：已插入真實(shí)DOM節(jié)點(diǎn)
Updating：正在重新渲染
Unmounting：已經(jīng)移出真實(shí)節(jié)點(diǎn)

Mounting

Updating

大致順序：

兩個(gè)掛載：

componentWillMount()

1、服務(wù)端和客戶端都只調(diào)用一次
2、在初始化渲染之前調(diào)用

所以，如果這里調(diào)用setState，則會(huì)在render中感知到state的變化。

componentDidMount()

1、僅在客戶端有效
2、初始化渲染之后立即調(diào)用一次

這時(shí)已經(jīng)有成型的DOM樹了，所以可以通過this.getDOMNode()來獲取DOM

四個(gè)更新

componentWillReciverPros(nextProps)

1、在接收到新的參數(shù)（props）時(shí)，會(huì)被執(zhí)行
2、在render之前被調(diào)用
3、在初始化渲染的時(shí)候，不會(huì)被調(diào)用

若調(diào)用this.setState()并不會(huì)引起第二次渲染。

shouldComponentUpdate(nextProps, nextState)

1、在接收到新的 props或state時(shí)，調(diào)用
2、在render之前被調(diào)用
3、初始化渲染不調(diào)用

若返回false，則組件不會(huì)更新（即render()不會(huì)被執(zhí)行），同時(shí)，componentWillUpdate和componentDidUpdate也不會(huì)被執(zhí)行。

componentWillUpdate(nextProps, nextState)

1、在接收到新的 props或state前，立刻調(diào)用
2、初始化渲染不調(diào)用

不能使用this.setState

componentDidUpdate(prevProps, prevState)

1、在組件更新已經(jīng)同步到DOM上之后調(diào)用
2、初始化渲染不調(diào)用

一個(gè)移除

componentWillUnmount

在組件將被移出的時(shí)候調(diào)用

GPU云服務(wù)器云服務(wù)器生命周期軟件生命周期生命周期理論頁(yè)面生命周期

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

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

相關(guān)文章

ReactJS 開發(fā)過程中的一些使用心得

摘要：目前開發(fā)的項(xiàng)目中為了仿原生效果如果自己去通過重新實(shí)現(xiàn)的話成本極大所以不得不使用來作為前端庫(kù)?？梢栽谶@個(gè)函數(shù)中清理在綁定的事件這個(gè)方式很有用。在開發(fā)過程中這些生命周期函數(shù)是我使用最頻繁最常見的操作。 ReactJS作為目前最火的構(gòu)建用戶界面的前端框架，為什么有那么多的前端工程師去追逐它，不僅因?yàn)樗?jiǎn)單，而且它提供了一系列強(qiáng)大的API讓我們擺脫以前繁瑣的DOM操作，使我們的邏輯更加清晰，代...

MangoGoing 2019-08-22 10:34 評(píng)論0 收藏0
ReactJS問題集結(jié)

摘要：引入數(shù)據(jù)，初始化，設(shè)置同步可以獲取數(shù)據(jù)，如何在獲取結(jié)束后進(jìn)行條件渲染根據(jù)條件的變化，初始化加載一種情況，數(shù)據(jù)加載完成后，改變條件，渲染另一種情況多個(gè)同級(jí)兄弟組件渲染，如果沒有父級(jí)標(biāo)簽包裹要求必須有且僅有一個(gè)節(jié)點(diǎn)，如何處理不用創(chuàng)建冗余的父級(jí)標(biāo) Issue1： ajax引入數(shù)據(jù)，初始化data==null，設(shè)置ajax同步async＝false可以獲取數(shù)據(jù)，如何在ajax獲取結(jié)束后rend...

lwx12525 2019-08-20 14:21 評(píng)論0 收藏0
哈姆雷特之 React

摘要：最近兩三周在主要在寫，在這里寫一下，算是個(gè)總結(jié)。但是打算換成，它是推薦用或，就這樣決定把之前的換成了。這里面主要的問題是作用域。總之也并沒有那么難。目前看來確實(shí)是非常適合于前后端分離的。最近兩三周在主要在寫 React，在這里寫一下，算是個(gè)總結(jié)。 webpack 我們的后端語言用的是 Go, 對(duì)于寫網(wǎng)站來說，Go 并沒有好的前端資源（js, css，image）的管理方式(打包，壓縮...

?xiaoxiao, 2019-08-19 18:10 評(píng)論0 收藏0
React技術(shù)?！猂eactJS

摘要：將模板語言轉(zhuǎn)為語言，并插入組件組件類第一個(gè)字母必須大寫對(duì)象屬性與組件屬性一一對(duì)應(yīng)。是例外，它表示組件的所有節(jié)點(diǎn)組件的屬性可以接受任意值。需要一種驗(yàn)證機(jī)制，驗(yàn)證別人使用組件時(shí)提供的參數(shù)是否合法獲取真實(shí)節(jié)點(diǎn)組件的是。初始化引入三個(gè)script: 第一個(gè)是React的核心代碼，第二react-dom.js是React里面操作DOM的部分，第三個(gè)browser.js將J...

Lin_YT 2019-08-19 18:41 評(píng)論0 收藏0
Reactjs Mixins

摘要：拋磚引玉實(shí)現(xiàn)一個(gè)日志功能。一般都會(huì)抽出公共的部分。看起來挺完美的，實(shí)際上還是有個(gè)問題代碼的耦合性太強(qiáng)像這種日志功能應(yīng)該同業(yè)務(wù)分離，不應(yīng)該直接出現(xiàn)在業(yè)務(wù)代碼中。如果做過開發(fā)，應(yīng)該很容易想到一個(gè)概念面向切面編程。拋磚引玉實(shí)現(xiàn)一個(gè)日志功能。組件在掛載前打印 Component will mount 組件掛載后打印 Component did mount 不能忍受的寫法 v...

xfee 2019-08-21 10:30 評(píng)論0 收藏0