前端筆記(React生命週期)

關於對React生命週期的理解:

defaultProps:此為初始化props 用於頁面中數據傳入(2種寫法,一般組件內,大多情況不寫)

組件內

前端筆記(React生命週期)

組件外

前端筆記(React生命週期)

constructor:狀態初始化

前端筆記(React生命週期)

componentWillMount:組件渲染前執行

前端筆記(React生命週期)

render:組件首次渲染

前端筆記(React生命週期)

componentDidMount:組件首次渲染後回調

前端筆記(React生命週期)

componentWillReceiveProps:組件的屬性被改變時的用法

用於父子組件交互,當父組件更改了子組件傳入的屬性時,子組件執行的生命週期

子組件:

前端筆記(React生命週期)

父組件:

給子組件傳個state作為更改,父組件上做個點擊事件

前端筆記(React生命週期)

點擊後變更state,render後執行到子組件

前端筆記(React生命週期)

子組件的componentWillReceiveProps就能取到新值

前端筆記(React生命週期)

shouldComponentUpdate:setState後判斷是否要更新。一般用法,如果state沒有變化,就不更新了。

前端筆記(React生命週期)

componentWillUpdate:確定更新,重新render前執行的

前端筆記(React生命週期)

componentDidUpdate:已更新,重新render後執行的

前端筆記(React生命週期)

前端筆記(React生命週期)


分享到:


相關文章: