React組件和生命週期
一
React組件
組件是React的核心、精髓。組件有輸入、輸出以及自身狀態，分別對應props、render、state，相信稍微用過React的同學都很清楚。
組件之間的傳值和方法調用。
父組件向子組件傳值
-
父組件通過屬性進行傳遞，子組件通過props獲取，這個傳遞和vue裏的一樣，但接收方式不同如下圖：
父組件通過屬性傳遞item值給子組件
子組件通過props接收item值
子組件向父組件傳值
通過回調進行傳遞數據
父組件通過屬性傳遞handleDelete函數
子組件通過接收函數handleDelete並傳遞index值執行父組件函數。
兄弟組件之間的傳值
-
通過相同的父組件進行傳遞數據
-
通過發佈/訂閱進行傳遞
-
使用context進行傳遞
-
使用redux對state進行統一管理
二
React生命週期
React的生命週期從廣義上分爲三個階段：掛載、渲染、卸載
掛載卸載過程
1.1.constructor()
constructor()中完成了React數據的初始化，它接受兩個參數：props和context，當想在函數內部使用這兩個參數時，需使用super()傳入這兩個參數。
注意：只要使用了constructor()就必須寫super(),否則會導致this指向錯誤。
1.2.componentWillMount()
componentWillMount()一般用的比較少，它更多的是在服務端渲染時使用。它代表的過程是組件已經經歷了constructor()初始化數據後，但是還未渲染DOM時。
1.3.componentDidMount()
組件第一次渲染完成，此時dom節點已經生成，可以在這裏調用ajax請求，返回數據setState後組件會重新渲染。
1.4.componentWillUnmount ()
在此處完成組件的卸載和數據的銷燬。
2.更新過程
2.1componentWillReceiveProps (nextProps)
-
在接受父組件改變後的props需要重新渲染組件時用到的比較多
-
接受一個參數nextProps
-
通過對比nextProps和this.props，將nextProps的state爲當前組件的state，從而重新渲染組件
2.2.shouldComponentUpdate(nextProps,nextState)
-
主要用於性能優化(部分更新)
-
唯一用於控制組件重新渲染的生命週期，由於在react中，setState以後，state發生變化，組件會進入重新渲染的流程，在這裏return false可以阻止組件的更新
-
因爲react父組件的重新渲染會導致其所有子組件的重新渲染，這個時候其實我們是不需要所有子組件都跟着重新渲染的，因此需要在子組件的該生命週期中做判斷。
2.3.componentWillUpdate(nextProps,nextState)
shouldComponentUpdate返回true以後，組件進入重新渲染的流程，進入componentWillUpdate,這裏同樣可以拿到nextProps和nextState。
2.4.componentDidUpdate(prevProps,prevState)
組件更新完畢後，react只會在第一次初始化成功會進入componentDidmount,之後每次重新渲染後都會進入這個生命週期，這裏可以拿到prevProps和prevState，即更新前的props和state。
2.5.render()
render函數會插入jsx生成的dom結構，react會生成一份虛擬dom樹，在每一次組件更新時，在此react會通過其diff算法比較更新前後的新舊DOM樹，比較以後，找到最小的有差異的DOM節點，並重新渲染。
生命週期圖示
