1 react生命周期相關(guān)的hook
a. 初始化:getInitialState
b. 初始化:getDefaultProps
c. 掛載: componentWillMount
d. 掛載: componentDidMount
e. 更新:componentWillReceiveProps
f. 更新:shouldComponentUpdate
g. 更新:componentWillUpdate
h. 更新:componentDidUpdate
i. 卸載:componentWillUnmount
2 測試結(jié)果記錄
1, react的生命周期個(gè)人認(rèn)為可以分為五個(gè)部分:初始化(props,state)、掛載、更新、卸載以及render。
2, 所有的測試結(jié)果將主要圍繞hook,state和props以及渲染展開。
3,react在第一次渲染組件的時(shí)候,只觸發(fā)初始化、掛載、渲染部分的hook函數(shù)。需要注意的是,在render之后被觸發(fā)的hook中使用setState都會觸發(fā)二次渲染
,這些hook包括componentDidMount和componentDidUpdate。
4,在渲染之前componentWillMount和componentWillReceiveProps中使用setState都不會觸發(fā)二次渲染。但是這并不說明,渲染之前的hook都不觸發(fā)二次渲染,比如下面所述。
5,一個(gè)有趣的測試是,在componentDidUpdate和componentWillUpdate中setState一個(gè)state值自增。你猜怎么著,死循環(huán)。頁面被阻塞,瞬間瀏覽器內(nèi)存吃緊不得不強(qiáng)制關(guān)閉瀏覽器。
6, 在componentWillUnmount中可以釋放一些組件中的無用變量。但是在componetWIllUnmount中使用setState不會觸發(fā)渲染。
7,據(jù)說在getInitialState或者構(gòu)造中使用props賦值給state會發(fā)生嚴(yán)重的bug,是因?yàn)間etInitialState和構(gòu)造都只被調(diào)用一次嗎?我猜是,測試結(jié)果確認(rèn)這個(gè)state不會再次被更新。建議這個(gè)操作放到componnetWillReceiveProps中使用setState完成不管是語義上還是邏輯上都更合適一些。
8,子組件的所有hook都是在父組件render的時(shí)候開始,和我們正常的思維邏輯一致。并列幾個(gè)子組件,子組件的生命周期都是按序的,嵌套的情況也是符合邏輯的,并沒有什么意外情況發(fā)生。
9,propTypes和defaultProps在es2015中,需要寫在class的外面,類似App.propTypes和App.defaultProps。另外需要注意的是propTypes只在開發(fā)和測試過程中有用,建議在生產(chǎn)環(huán)境刪除。propTypes的檢查結(jié)果有可能是一個(gè)警告,但是這并不會直接導(dǎo)致程序運(yùn)行失敗。
10.關(guān)于mixin這個(gè)東西,es2015中已經(jīng)不建議使用了。查閱資料發(fā)現(xiàn)有個(gè)高階組件替換mixin的文章。大致的意思是給組件套一層,類似于從父級別繼承方法。