react學習筆記 react生命週期

react v16.4 的生命週期

提前感謝aermin的筆記詳解react生命週期(包括react16版)，讓我收益匪淺。

我通常把react生命週期劃分為四個階段：元件初始化，元件掛載，元件更新，元件解除安裝。

import react,

from
'react'
;class
test
extends
component
}

而constructor()用來做一些元件的初始化工作，如定義this.state的初始內容。

此階段分為componentwillmount，render，componentdidmount三個時期。

setstate引起的state更新或父元件重新render引起的props更新，更新後的state和props相對之前無論是否有變化，都將引起子元件的重新render。

在此階段主要涉及了componentwillreceiveprops，shouldcomponentupdate，componentwillupdate，render，componentdidupdate幾個週期。

這個階段只有乙個生命週期：componentwillunmount，此方法在元件被解除安裝前呼叫，可以在這裡執行一些清理工作，比如清除元件中使用的定時器，清除componentdidmount中手動建立的dom元素等，以免引起記憶體洩漏。

原來（react v16.0前）的生命週期在react v16推出的fiber之後就不合適了，因為如果要開啟async rendering，在render函式之前的所有函式（componentwillmount，componentwillreceiveprops，shouldcomponentupdate，componentwillupdate），都有可能被執行多次，這意味著io操作（資料請求）也有可能被多次呼叫。

為了解決這個問題，react v16.3的更新中引入了兩個新的生命週期函式：getderivedstatefromprops，getsnapshotbeforeupdate。

static getderivedstatefromprops(props, state)在元件建立時和更新時的render方法之前呼叫，它應該返回乙個物件來更新狀態（需要提前初始化state狀態），或者返回null來不更新任何內容。也就是說，無論哪一種情況（setstate引起的state更新或父元件重新render引起的props更新）引起的元件更新都將呼叫它。所以除了shouldcomponentupdate，其他在render函式之前的所有函式（componentwillmount，componentwillreceiveprops，componentwillupdate）都可以被乙個靜態函式getderivedstatefromprops替代，強制開發者在render之前只做無***的操作，而且能做的操作侷限在根據props和state決定新的state。

常用引數：props，state

含義：更新後的props，更新後的state。

getsnapshotbeforeupdate()被調用於render之後，可以讀取但無法使用dom的時候。它使您的元件可以在dom可能更改之前捕獲一些資訊（例如滾動位置）。該生命週期返回的任何值都將作為引數傳遞給componentdidupdate()。

常用引數：prevprops，prevstate，this.props，this.state

含義：更新前的props，更新前的state，更新後的props，更新後的state。

官方示例：

class

scrollinglist
extends
react.component
getsnapshotbeforeupdate
(prevprops, prevstate)
return
null;}
componentdidupdate
(prevprops, prevstate, snapshot)
}render()
>
<
/div>);
}}

react獲取全域性 react學習筆記

個人之前也粗略看過react的文件，但是程式設計師最怕的就是沒有專案實操，看完後一段時間就全忘了，但是現在市面上react的使用又很多 我太難了 最近因為疫情只能呆在家裡，剛好利用這段時間搞一搞。當然也是粗略的搞，做完乙個大屏展示後，發現react上手確實比vue要難點。react沒有vue一樣的模...

React學習筆記

專案需要使用react進行開發，故從vue與react的異同切入學習，記錄一下學習筆記 react整體的思路就是函式式，所以推崇純元件，資料不可變，單向資料流 單向繫結 當然需要雙向的地方也可以做到，比如結合redux form vue是響應式的思想，認為資料可變，通過watcher監聽每乙個屬性，...

學習react筆記

node中匯入模組 var 名稱 require 模組識別符號 node中向外暴露成員的形式 module.exports 在es6中，也通過規範的形式，規定了es6中如何匯入和匯出模組 es6中匯入模組，使用 import 模組名稱 from 模組識別符號 import 表示路徑 import f...