03元件的生命週期和事件處理

2021-08-10 01:45:06 字數 1225 閱讀 3192

這一劫,聊一聊,react compodnents 從建立到消失,的生命週期,狀態和屬性在生命週期中是如何流轉的.

首先我們來了解一下,react components 在瀏覽器中 存在的生命週期的三個狀態,

第乙個狀態我們稱之為,mounted:

指的是乙個react components 被解析生成對應的dom 節點,並被插入瀏覽器的dom 結構的這麼乙個過程,當我們從瀏覽器上看到從無到有的效果的時候,mounted 已經結束了,我們就說這個component 元件被 mounted 了.

第二個狀態是,update :指的是被mounted 的乙個 react components 被重新render的過程,為這個重新渲染的過程,並不是說相應的dom結構就一定會發生改變,react 會把這個components 的當前state和最近一次的state 進行對比,只有當state 確實發生了改變,並且影響到 了dom結構 的時候react才會 去改變對應的dom結構, 什麼叫做components的state ,我們馬上就會說到,

第三個狀態我們稱之為unmounted ,mounted 的 react components 對應的dom節點,被從dom結構中,移除的這樣乙個過程,每乙個狀態,react 都封裝了對應的hook 函式,對計算機出身的人對hook 函式不陌生了,他最早是用來 使windowws 中提供的一種用於替換 dos下的中斷系統機制,現在呢,則是一種泛指了,中文我們,把它翻譯成,鉤子,也是很傳神的,在對特定的系統時間進行hook後,一旦發生以hook事件,對該事件進行hook的程式,就會收到系統的通知,這時程式就在 第一時間,對該事件做出響應 ,而對於每一種狀態,react 都封裝了多個hook函式,如果要你封裝乙個hook函式,你會怎麼設計, will 和did ,,,就愛你更要怎麼怎麼樣 ,和已經怎麼怎麼樣,

將要mounted 將要update 將要 unmounted 已經mounted 已經 update 已經 unmounted ,,,,,事實上呢,react 的設計思想也是如此,只不過人家比我們想的更加全面一些 ,

在mounted 這個階段,我們可以新增2個hook函式,分別是:componentwillmount 和 componentdidmount 前者是在mounting錢呼叫,後者是在mounted 之後呼叫 .還有乙個函式,用來初始化react components 的state 叫做 :::::getinitialstate

react(四)元件的生命週期

元件的生命週期 當元件第一次渲染時,依次呼叫的過程 1 constructor 1 不是所有元件均會定義該函式 2 定義該函式的目的 this.state 例如,已有成員函式clickbtn,繫結this指向的方式可以是this.clickbtn this.clickbtn.bind this 2 ...

React(三) 元件的生命週期

react元件的生命週期分為三大部分 1 掛載 mount 我們把元件渲染,並且構造dom元素插入到頁面的過程稱為元件的掛載。元件掛載的過程 元件掛載先關函式,只在元件掛載的時候呼叫,在元件更新時不會執行 import react from react class test extends reac...

react 複習(2)元件的生命週期

當元件例項被建立並插入 dom 中時,其生命週期呼叫順序如下 constructor static getderivedstatefromprops static getderivedstatefromprops nextprops,prevstate nextprops 當傳入的type發生變化的...