React—元件生命週期詳解
在元件的整個生命週期中,隨著該元件的props或者state發生改變,它的DOM表現也將有相應的改變,一個元件就是一個狀態機,對於特定的輸入,它總會返回一致的輸出。
React為每個元件提供了生命週期鉤子函式去響應不同的時刻——建立時、存在期及銷燬時。
生命週期方法
React的元件擁有簡潔的生命週期API,它僅僅提供你所需要的方法,而不會去最求全面。
例項化:
一個例項出吃被穿件時所呼叫的生命週期方法與其他哥哥後續例項被建立所呼叫的方法略有不同。當你首次使用一個組建類時,會看到下面這些方法依次被呼叫:
getDefaultProps
getInitialState
componentWillMount
render
ComponentDidMOunt
對於該元件類所有後續應用,你將會看到下面的方法依次被呼叫。注意:gerDefaultProps方法不在列表中。
getInitialState
componentWillMount
render
componentDidMount
存在期:
隨著應用狀態的改變,以及元件逐漸受到影響,你將會看到下面的方法一次被呼叫:
componentwillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
銷燬&清理期:
最後,當該元件被使用完成後,
以下是詳細說明:
例項化:
當每個新的元件被建立首次渲染時,有一系列的方法可以用來為其做準備工作,這些方法中的每一個鬥毆明確的職責,如下所示:
getDefaultProps
對於元件來說,這個方法只會呼叫一次,對於那些沒有父輩元件指定的props屬性的新建例項來說,這個方法返回的物件可用與為例項設定預設的props值。
getInitalState:
對於元件的每個例項來說,這個方法呼叫次數有且僅有一次,這裡你將有機會初始化每個例項的state,與getDefaultProps方法不同的是,每次例項建立時該方法都會被呼叫一次,這個方法中,可以訪問到
componentWillMount:
該方法在完成首次渲染之前被呼叫,這也是在render方法呼叫前可以修改元件state的最後一次機會。
render:
在這裡你建立一個虛擬DOM,用來表示元件的輸出,對於一個元件來說,render是唯一一個必需的方法,並且有特定的規則。render方法選要滿足下面幾點:
只能通過this.props和this.state訪問資料。
可以返回null,false或者任何React元件。
只能出現一個頂級元件(不能返回一組元素)、
必須純淨,有位置不能改變元件狀態或者修改DOM輸出。
componentDidMount:
在render方法成功呼叫並且真實的DOM已經被渲染之後,可以在componentDidMount內部通過this.getDOMNode(方法訪問到它。
這就是你可以訪問原始DOM的生命週期的鉤子函式,當你需要測量DOM元素的高度或者使用計時器操作它或者執行jQuery外掛時,可以將這些操作掛載到這個方法上:
舉例來說,假設需要在一個通過React渲染出的表單元素上使用jQueryUI的Autocomplete外掛,則可以這樣使用它:
//需要自動補全的字串列表
var datasource =[...];
var MyComponent=React.crateClass({
render:function(){
rerurn <input .../>
},
componentDidMount:function(){
$(this.gerDOMNode()).autocomplete({
source:datasource
});
}
});
ps:當React執行在伺服器端時候,componentdidmount方法不會被呼叫。
存在期:
此時元件已經渲染好並且使用者可以與它進行互動,通常一次滑鼠點選、手指點按或者鍵盤事件觸發一個時間處理器,隨著使用者改變了元件或則和整個應用的state,便會有新的state流入元件樹,並且我們將會獲得操控它的機會。
componentWillReceiveProps:
任何時刻元件的props都可以通過父輩元件來更改,出現這種情況時,componentWillReceiveProps方法會被呼叫,你將獲得更改props方法及跟他關心state的機會。例如:
componentWillReceiveProps:function(nextProps){
if(nextProps.checked !==undefined){
this.setState({
checked:nextProps.checked
});
}
}
shouleComponentUpdate:
呼叫shoulecomponentUpadte方法在元件渲染時進行精確優化。如果某個元件或者它的任何子元件不需要渲染成新的props或則和state,則該方法返回false,返回false則是說明React要跳到render方法,一屆位於render前後的鉤子函式:componentWillUpadate和componentDidUpdate。
該方法非必需的,並且大部分情況沒有必要使用它。
componentWillUpdate:
和componentwillMount:方法類似,組建會在收到新的props或者state進行渲染之前呼叫該方法。
注意:你不可以在該方法中更新huo或者props。而應該藉助componentWillreceiveProps方法在執行時更新state。
componentDidUpdate:
和componentDidMount方法類似,該方法給我們更新已經渲染好的DOM機會。
銷燬&清理期
當React使用完一個元件,這個元件必須從DOM中解除安裝隨後被銷燬。此時僅有的一個狗子函式會做出響應,完成所有的清理和銷燬工作。
componentWillUnmount:
最後,隨著元件從他的層級結構中移除,這個元件的生命也就走id熬了盡頭,該方法會在元件被移除之前呼叫,讓你有機會做一些清理工作。在componentDidMount方法中新增的所有任務都需要在該方法中撤銷,比如穿件的定時器或者新增的事件監聽器。
反模式:把計算後的值賦值給state:
getInitalState方法中,嘗試通過this.props來建立state的做法是一種反模式。React專注於維護資料的單一來源。它的設計使得傳遞資料的來源更加顯而易見,這激素和iReact的一個優勢。
比如在元件中吧日期轉化成字串形式,或者渲染之前字串轉換為大寫。這些都不是state,只能夠在渲染時進行計算。
當元件的state值和它基於的prop不同步,因而無法瞭解到render函式內部結構時,可以認定為一種反模式。
//反模式:經過計算後值不應該賦給state
getDefaultProps:function(){
return{
date:newDate()
};
},
getInitalState:function(){
return{
day:this.props.date.getDay()
}
},
render:function(){
return <div>Day:{this.state.day}</day>
}
正確的模式應該是渲染時計算這些值,保證了計算後的值永遠不會派生出它的props值不同步。
//渲染時計算值是正確的
gerDefaultProps:function(){
return{
date:new Date()
};
}
render:function(){
var day = this.props.date.getDay();
return <div>Day:{day}</div>;
}
然而,如果你的目的並不是同步,而只是簡單的初始化state,那麼在getInitialState方法中使用props是沒問題的,只是一定要明確你的意圖,比如prop新增initial字首。
getDefaultProps:function(){
return{
initialValue:'some-dafault-value'
};
},
getInitialState:function(){
return{
value:this.props.initialValue
};
},
render:function(){
return <div>{this.props.value}</div>
}
總結:
react生命週期提供了進行設計的鉤子函式,會伴隨著元件整個生命週期。和狀態機類似,每個元件都被設計成了能夠在整個生命週期中輸出穩定、語義化的標籤。
元件不會獨立存,隨著父元件將props推送給他們的子元件,以及那些子元件渲染它們自身的子元件你必須謹慎的考慮資料是如何流經整個應用的。每一個子元件真正需要掌握多少資料,哪個元件來控制應用的狀態?這些涉及資料流了。
相關推薦
【譯】最新版本react元件生命週期詳解(v16.3.1)
16版本的react對元件的生命週期函式進行了一些修改,在每個react元件中都有以下幾個生命週期方法~我們需要在不同階段進行討論。為了良好的閱讀體驗,請檢視github原文 元件生命週期概述 1.初始化 在元件初始化階段會執行 1. const
React—元件生命週期詳解
在元件的整個生命週期中,隨著該元件的props或者state發生改變,它的DOM表現也將有相應的改變,一個元件就是一個狀態機,對於特定的輸入,它總會返回一致的輸出。 React為每個元件提供了生命週期鉤子函式去響應不同的時刻——建立時、存在期及銷燬時。 生命週期方法 R
React - 元件的生命週期詳解(及各階段呼叫的方法)
轉自http://www.hangge.com/blog/cache/detail_1473.html React - 元件的生命週期詳解(及各階段呼叫的方法) 2016-12-22釋出:hangge閱讀:2699 ReactJS 的核心思想是元件化,即按功能封裝成一個一個的元
react生命週期詳解
React的生命週期分為三個階段:1.初始化階段 2.更新階段 3.銷燬階段 一,初始化階段 (1) 方法:getDefaultProps(); 作用:作用於元件類,只調用一次,獲取預設的props,也可以用dufaultProps設定元件的預設屬性; 注意: (2) 方法:
Android四大元件啟動順序、生命週期詳解
package com.dada.test; import android.app.Activity; import android.content.ComponentName; import android.content.Context; import android.content.Intent; i
R4-React生命週期詳解及最新變動
這一章來介紹react元件的生命週期。之前介紹過純函式元件是沒有生命週期的,那到底生命週期是什麼?其實簡單來講就是元件的初始和消亡,就如同小草的生長一樣(配圖隨機,純屬護眼)從發芽到消亡。元件在這個過程中會經歷那些階段,又是如何標誌這些階段的。 本章的重點就是
React原始碼分析4 — React生命週期詳解
1 React生命週期流程 呼叫流程可以參看上圖。分為例項化,存在期和銷燬三個不同階段。介紹生命週期流程的文章很多,相信大部分同學也有所瞭解,我們就不詳細分析了。很多同學肯定有疑問,這些方法在React內部是在哪些方法中被呼叫的呢,他們觸發的時機又是什麼時
(十二)React-Native-生命週期詳解
一.React-Native生命週期 說到生命週期,大家大概也能想到就是建立、銷燬、狀態改變。RN的元件就是一個狀態機。它接收兩個輸入引數:props和state,返回一個Virtual DOM。和Native一樣,RN也為我們提供相應的鉤子函式。RN的狀態變化取決於pr
react元件生命週期鉤子函式
掛載期 constructor 資料接收 實現繼承super(props) componentWillMount 資料掛載之前 可以操作資料 不可以操作dom componentDidMount 資料掛載之後 可以操作資料和dom render 渲染元件 和 html 標籤 更新期
Spring IOC -bean物件的生命週期詳解(補充,含程式碼)
生命週期執行的過程如下:1) spring對bean進行例項化,預設bean是單例2) spring對bean進行依賴注入3) 如果bean實現了BeanNameAware介面,spring將bean的id傳給setBeanName()方法4) 如果bean實現了BeanFactory
Servlet簡介及其生命週期詳解
簡介 Servlet生命週期,即闡述Servlet從產生到毀滅的整個過程。 在Servlet產生到消亡的過程中,有三個生
Android View的onFinishInflate和onSizeChanged生命週期詳解
1、onFinishInflate 從字面上來看這個方法的作用就是在完成View的佈局例項化後的回撥,關於佈局例項化的內容(LayoutInflater)的學習網址:LayoutInflater原理,通過對這篇部落格的 學習可以得知:這個回撥方法是在整個佈局檔案都例項化結束後每個View才進
vue 生命週期詳解
每個Vue例項在被建立之前都要經過一系列的初始化過程,這個過程就是vue的生命週期。下面是生命週期圖 可以看到在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作, 那麼先列出所有的鉤子函式,然後我們再一一詳解: befo
vue生命週期詳解
初心-楊瑞超個人部落格誠邀您加入qq群(IT-程式猿-技術交流群):757345416 先上圖: 下面我們用例項來理解生命週期: <div class="test" style="border: 1px black dashed;padding: 8
Vue2 生命週期詳解
<script> /** * Vue生命週期解析 */ export default { /** * name: name * type: string * explain: 允許元件模板遞迴地呼叫自身。 * 注意,元件在全域性用 Vue.compon
Spring Bean生命週期詳解
在Spring中 Bean 可謂是一個核心的元素,當我們結合Spring進行程式設計的時候也離不開Bean,面對這樣重要的一個角色,瞭解其生命週期和該生命週期所涉及的環節對我們更加熟練靈活地使用Bean是很有Bean必要的,下面我們就來詳細分析下Bean的生
【vue】vue的生命週期詳解
vue的生命週期詳解 不多BB先上圖 可以看到在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作,,那麼先列出所有的鉤子函式,然後我們再進行詳解: beforeCreate——建立前 created——建立後
React元件生命週期
React元件在生命週期裡面大概有兩種情況,一種是初次渲染,一種是狀態更新導致再次渲染。咱們從元件生命週期的每一步可進行的操作的角度來了解一下。 初次渲染 建構函式,指定This,初始狀態,繫結函式(constructor) constructor(prop
Servlet的生命週期詳解
敘述Servlet的生命週期其實就是找出Servlet是怎麼出生的又是怎麼消失的一個過程。我們從最主要的三個方法去記錄Servlet產生與消失的過程: 初始化階段,呼叫init方法: 初始化階段。
vue 生命週期詳解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <st