React+ES6 實例化教程(5)

大家好,我又來了,這可能是春節之前我最后一次更新react,先祝大家春節快樂,新的一年里步步高升。接下來進入正題。

我站在大家的角度去想有可能我的更新進度有點慢,容我給大家解釋一下,我覺得其他的文章更新快一點還說得過去,但是像這種學術性的東西我還是需要細細探究并且把對的東西分享給大家比較好,也不至于賺來討罵聲。慢點希望大家能理解。上次我給大家建了一個簡單的DOM交互的拖拽事件,這次我再給大家更新一點在react中比較重要的部分那就是生命周期。進入正題:

react中的生命周期可以理解為這個組件從創建到掛載再到更新最后到卸載的過程,簡單點說就是這樣的。那樣的話這些過程轉化為編程語言的話怎么解釋呢?我給大家說一下:

生命周期圖解

看到這個圖解的時候我也是蠻頭大的,但是我們一步一步弄清楚之后就看起來沒那么麻煩了。

首先我們把組件的生命周期進行大致的劃分:類調用、實例化、更新以及卸載。(先進行理論解釋然后代碼演示)

類調用:(getDefaultProps)這個過程就在我們進行組件創建的時候調用一次,也就是說無論創建多少個組件元素這個過程只會被調用一次.

實例化:這里面進行很多個操作我一一解釋,這個過程也是僅執行一次,執行完畢后組件會被渲染到DOM中,特們包括:getInitialState、componentWillMount、render以及componentDidMount(其中我們之前的demo中都包括到了只是現在才給大家講解)

更新:這個過程會在我們之前見過的this.state和this.props賦值期間執行。

? ?this.state變更時:shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate函數會被執行。

? ?this.props變更時:componentWillReceiveProps、shouldComponentUpdate、componentWIllUpdate、render、componentDidUpdate函數會被執行。

卸載:(componentWillUnmount)這個過程會在組件被銷毀的時候被調用一次.

這就是對上面這個生命周期圖解的解釋大家有可能覺得更新的兩個狀態有點相似其實后者就是在接受參數變化的時候多加了一個將要接受參數的方法。

這次我們的講解主要圍繞componentWillMount(組建創建之前)、componentDidMount(組建創建之后)、componentWillUpdate(組件更新之前)、componentDidUpdate(組件更新之后)、componentWillUnmount(組件卸載之前)、componentReceiveProps(組件參數接受更新)進行講解。

其實在我給大家講解實例之前我還做過一個時鐘的例子,在那個例子之中我們就用到了生命周期中的一個函數,在這里我就不賣關子了我直接把例子附上盡管如此我還是希望大家能順手敲一下來增加熟練度:


時鐘組件代碼

這其中用到的componentDidMount方法解決了一個問題就是我們在用定時器來進行渲染的時候會遇到一個情況就是我們頁面加載的時候不是直接從當前的時間開始走而是需要從一開始的0:0:0跳一下到當前時間,用原生的解決的辦法是在定時器之前先調用一次fn函數但是在這里是沒有用的,我們在這里很巧妙地用了componentDidMount來進行解決,也就是說我們在組件掛載完成后立馬執行一次fn函數這樣就不會出現跳的情況了。

說到這里我感覺大家應該知道這些個方法的用處了,然后我們就用一個例子來讓大家看一下這些方法的執行時間:


例子

這個例子就是展示了我們這兩個方法的執行時間,一個是在即將渲染到界面的時候進行調用另一個是在剛剛掛載到界面的時候進行調用。

接下來我們展示一下即將卸載的執行時機:

小例子

很簡單的點擊渲染然后可以在瀏覽器中查看到對應的輸出:

剛渲染完
點擊切換渲染

這樣是不是很明確的就知道這些方法的執行時機了呢?

下面我們就用一個新的例子來進行對剩余的方法進行講解,但是這次我不多解釋我只上例子然后其余的希望大家能自己分析分析然后自己敲敲代碼實現一下看看是怎么回事。

執行時機demo

這次的例子中用了一個子組件與父組件的嵌套關系,后面會有例子講解,但是大體也就是這樣,萬箭不離其宗。

這樣我這次就講完了,我感覺這次講的看上去不多但是需要大家理解的比較多,希望能動起手來并且動起腦來跟隨我的講解進行精簡的學習,基礎打好后面難得地方也就順過去了。

下期預告:列表創建以及react中的ajax交互

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,087評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,521評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,207評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,603評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,813評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,364評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,110評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,305評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,532評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,033評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,268評論 2 375

推薦閱讀更多精彩內容