react項目復習總結(2)--react生命周期和組件通信
這是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
執行順序:
componentWillMount、componentDidMount 這2個生命周期是首次進入頁面render前執行的
順序:
componentWillReceiveProps 是組件的傳入屬性被父組件修改後執行的:
接收到父組件傳入的新props。
父組件修改傳入屬性的方式:
傳入的值是個state就可以。
(這是組件通信
要實現子傳父的話,那父組件調用子組件時傳個回調函數獲取就可以了
如:
這是父組件render
父組件回調函數
這是子組件屬性被修改函數,執行這個回調函數即可執行父組件函數
這裏這麽用,父組件傳值給子組件後,子組件能立即回調父組件,形成有來有回。
點擊按鈕,這裏輸出111。
直接子傳父的方法:
父:
子:
父組件傳個回調給子組件,子組件通過this.props可調用到這個函數,子就可以傳值給父組件了。
react項目復習總結(2)--react生命周期和組件通信