js手札-reactjs生命周期

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

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

生命狀態(tài)：

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

Mounting

Updating

大致順序：

兩個掛載：

componentWillMount()

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

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

componentDidMount()

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

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

四個更新

componentWillReciverPros(nextProps)

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

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

shouldComponentUpdate(nextProps, nextState)

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

若返回false，則組件不會更新（即render()不會被執(zhí)行），同時，componentWillUpdate和componentDidUpdate也不會被執(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)用

一個移除

componentWillUnmount

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

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

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

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

相關(guān)文章

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

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

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

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

lwx12525 2019-08-20 14:21 評論0 收藏0
哈姆雷特之 React

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

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

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

Lin_YT 2019-08-19 18:41 評論0 收藏0
Reactjs Mixins

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

xfee 2019-08-21 10:30 評論0 收藏0