1. 程式人生 > >react項目復習總結(2)--react生命周期和組件通信

react項目復習總結(2)--react生命周期和組件通信

-- 分享 技術 fault .com 進入 ltp init info

這是react項目復習總結第二講

第一講:https://www.cnblogs.com/wuhairui/p/10367620.html

首先我們來學習下react的生命周期(鉤子)函數。

什麽是react生命周期呢?

就是指react組件執行時在某個特定的時間點自動調用執行的函數。

ES5傳統創建組件方式是這樣的:

getDefaultProps:設置組件默認的props(屬性)

getInitialState:設置組件默認的state(狀態)

技術分享圖片

執行順序是:

技術分享圖片

另外,getDefaultProps函數組件未創建實例時就會被執行。

除了上面的ES5,還有現在大多數被使用的是ES6模式

創建組件。

以類的方式作為組件,使用的組件就是這個組件類的對象。

static defaultProps:設置默認屬性

constructor:用於設置默認狀態 初始化。必須使用super,之後才能使用this

技術分享圖片

執行順序:

技術分享圖片

componentWillMountcomponentDidMount 這2個生命周期是首次進入頁面render前執行的

技術分享圖片

順序:

技術分享圖片

componentWillReceiveProps 是組件的傳入屬性父組件修改後執行的:

接收到父組件傳入的新props

技術分享圖片

父組件修改傳入屬性的方式:

傳入的值是個state就可以。

技術分享圖片

(這是組件通信

的一種方式,屬於父子組件關系的通信,這是父傳子

要實現子傳父的話,那父組件調用子組件時傳個回調函數獲取就可以了

如:

這是父組件render

技術分享圖片

父組件回調函數

技術分享圖片

這是子組件屬性被修改函數,執行這個回調函數即可執行父組件函數

這裏這麽用,父組件傳值給子組件後,子組件能立即回調父組件,形成有來有回。

技術分享圖片

點擊按鈕,這裏輸出111。

直接子傳父的方法:

父:

技術分享圖片

子:

技術分享圖片

父組件傳個回調給子組件,子組件通過this.props可調用到這個函數,子就可以傳值給父組件了。

react項目復習總結(2)--react生命周期和組件通信