React生命週期中應該作什麼事

React生命週期函數

裝載組件觸發

0.construct(props) 用來 props--->state

初始化state,而且把props轉化爲statehtml

1.componentWillMount   用來 props--->state,用構造函數就能夠了,這個咱們通常不用

只會在裝載以前調用一次,在render以前調用,你能夠在這個方法裏面調用setState 改變狀態,而且不會致使額外調用一次render,不能有反作用在裏面react

 

2.componentDidMount    頁面初次加載好後,發送網絡請求,獲取數據後setState(data) 觸發從新渲染 or 操做DOM改變樣式

只會在裝載完成以後調用一次,在render以後調用,從這裏開始能夠經過 ReactDOM.findDOMNode(this)獲取到組件的DOM節點。網絡

更新組件觸發

1.componentWillReceiveProps(nextProps)  用來props--->state,setState不會從新渲染

有可能props沒有改變的時候也觸發,好比父組件更新致使的觸發,有時候可能須要比較props是否發生了改變函數

 

2.shouldComponentUpdate(nextProps, nextState)  判斷新的props或者state是否須要從新渲染

更新前全部的setState已經完成,forceUpdate()會強刷this

 

3.componentWillUpdate(nextProps, nextState)  能夠執行一些預備操做在更新前, 基本不用

此時已經不能調用setState了,spa

 

4.componentDidUpdate()  頁面加載好後,發送網絡請求,獲取數據後setState(data) 觸發從新渲染 or操做DOM改變樣式

 

 

 

 

給出一個疑問:3d

官網說能夠再componenDidUpdate 中作一些網絡請求,而後setState的事情code

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.component

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).htm

 

推薦一篇好的使用react的建議

http://aeflash.com/2015-02/react-tips-and-best-practices.html

相關文章
相關標籤/搜索