React筆記 元件生命週期

2021-09-29 21:15:22 字數 1370 閱讀 8510

react是乙個ui庫,只需定義一次使用者介面,就可以將其用在多個地方,之後,當用的狀態(state)發生變化時,react將會自動做出反應,更新介面,其**偏向宣告式。需要關注的是其元件的概念,元件可以用於構建使用者介面,並通過任何適當的方式進行組合。一般來說,乙個元件類由 extends component建立,並且提供乙個render方法以及其他可選的生命週期函式,元件相關的事件或方法來定義。

import react,  from 'react';

import from 'react-dom';

class hellomessage extends react.component }

const element = ;

reactdom.render(

element,

document.getelementbyid('root')

);

getinitialstate :初始化this.state 的值,只在元件裝載之前呼叫一次。如果是使用es6的語法,可以在建構函式中初始化狀態,如下:

class counter extends component ;

} render()

}

react 把元件看成是乙個狀態機(state machines)。通過與使用者的互動,實現不同狀態,然後渲染 ui,讓使用者介面和資料保持一致。react 裡,只需更新元件的 state,然後根據新的 state 重新渲染使用者介面.

getdefaultprops:只在元件建立時呼叫一次並快取返回的物件(即在react.createclass之後就會呼叫)。因為這個方法在例項初始化之前呼叫,所以這個方法裡面不能依賴this獲取到這個元件的例項。在元件裝載之後,這個方法快取的結果會用來保證訪問this.props的屬性時,當這個屬性沒有在父元件中傳入,也總是有值  如果是使用 es6 語法,可以直接定義 defaultprops 這個類屬性來替代,這樣能更直觀的知道 default props 是預先定義好的物件值:

counter.defaultprops =;
render: 組裝生成這個元件的html結構

更新元件觸發:

這些方法不在首次render元件的週期呼叫:

componentwillreceiveprops

shouldcomponentupdate

componentwillupdate

componentdidupdate

解除安裝元件觸發

componentwillunmount

生命週期圖:

React元件生命週期

元件的所有狀態結合起來就成了元件的生命週期。即 初始化階段 執行中階段 銷毀階段。不同生命週期內可以自定義的函式 初始化階段 getdefaultprops 獲取預設屬性,只呼叫一次,是在createclass之後呼叫的。例項之間共享引用 getinitialstate 初始化每個例項的特有初始化狀...

React元件生命週期

首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類,只呼叫一次,返回物件用於設定預設的props,對於引用值,會在例項中共享。2.getinitialstate 作用於元件的例項,在例項建立時呼叫一次,用於初始...

React 元件生命週期

在本章節中我們將討論 react 元件的生命週期。元件的生命週期可分成三個狀態 生命週期的方法有 這些方法的詳細說明,可以參考官方文件。以下例項在 hello 元件載入以後,通過 componentdidmount 方法設定乙個定時器,每隔100毫秒重新設定元件的透明度,並重新渲染 varhello...