React優(yōu)點(diǎn)
- 組件化
將一個(gè)應(yīng)用拆分為組件的形式再進(jìn)行組合,而對(duì)于每個(gè)組件來(lái)說(shuō),將應(yīng)用狀態(tài)和DOM進(jìn)行拆分,最終提高了項(xiàng)目的后期可維護(hù)性毕贼。- 虛擬DOM
虛擬DOM的出現(xiàn),使react不需要每次狀態(tài)改變都去訪問(wèn)DOM。而是生成新的虛擬DOM,和之前的虛擬DOM 進(jìn)行對(duì)比,然后將改變的部分進(jìn)行渲染溉卓。降低了訪問(wèn)DOM的成本,使其具有高性能。
React缺點(diǎn)
- 虛擬DOM严肪。這是react的優(yōu)勢(shì)也是有很大缺點(diǎn)的键思。首先,每次小小狀態(tài)改變都要去生成新的虛擬DOM,如果這個(gè)虛擬DOM的結(jié)構(gòu)復(fù)雜無(wú)疑帶來(lái)很多開(kāi)銷(xiāo)。其次,我們需要改變一個(gè)子組件的數(shù)據(jù),但數(shù)據(jù)來(lái)于父級(jí)阐枣。這時(shí)候,子組件的兄弟組件都會(huì)被重新執(zhí)行render,生成虛擬DOM马靠。還有,在做列表的時(shí)候,都必須加上key 來(lái)提高性能奄抽。react本身并不能很好的處理這些問(wèn)題,必須我們?nèi)藶榈耐ㄟ^(guò)添加key,通過(guò)shouldComponentUpdate方法比較,immutable等方法去提升性能。
- 視圖層甩鳄。只使用react本身是不能構(gòu)建一個(gè)合格的應(yīng)用的,必須結(jié)合周邊各種庫(kù)的輔助逞度。
Props & State
- 子組件和父組件之間可以通過(guò)Props進(jìn)行數(shù)據(jù)的傳遞。
- State表示組件的當(dāng)前狀態(tài),通過(guò)改變state進(jìn)行頁(yè)面的重新渲染妙啃。
- 兄弟組件之間,通過(guò)狀態(tài)提升,把子組件的state數(shù)據(jù)提升至其共同的父組件當(dāng)中保存档泽。之后父組件可以通過(guò)props將狀態(tài)數(shù)據(jù)傳遞到子組件當(dāng)中,實(shí)現(xiàn)通信。
react-lifecycle.png
組件實(shí)例化創(chuàng)建
- getDefaultProps
作用于組件類(lèi),設(shè)置默認(rèn)的props,只調(diào)用一次揖赴。es6中使用靜態(tài)屬性static defaultProps表示馆匿。- getInitialState
實(shí)例創(chuàng)建時(shí)調(diào)用一次,設(shè)置默認(rèn)state。es6中可以在constructor中設(shè)置this.state表示储笑。- componentWillMount
組件渲染前調(diào)用,這里可以修改state值,而不會(huì)再次觸發(fā)render甜熔。- render
根據(jù)props和state創(chuàng)建虛擬DOM。- componentDidMount
渲染結(jié)束后調(diào)用,修改state將被渲染突倍∏幌。可以通過(guò)findDOMNode去獲取修改DOM。服務(wù)器端無(wú)法使用componentDidMount羽历。
組件更新
- componentWillReceivePorps(nextProps)
屬性改變時(shí)調(diào)用,nextProps為更新后的props,這里容易混淆焊虏。- shouldComponentUpdate(nextProps, nextState)
nextProps,nextState分別為更新后的屬性和狀態(tài)。通常我們?cè)谶@里判斷屬性和狀態(tài)是否改變,是否需要重新渲染秕磷。如果返回true將渲染,false不會(huì)诵闭。- componentWillUpdate(nextProps, nextState)
組件更新渲染前調(diào)用,可以設(shè)置state。
- componentDidUpdate()
組件渲染后調(diào)用,修改state將被渲染澎嚣∈枘颍可以通過(guò)findDOMNode去獲取修改DOM。
組件卸載
- componentWillUnmount
組件將被卸載時(shí)調(diào)用,一般用來(lái)清除事件監(jiān)聽(tīng)和定時(shí)器易桃。
