一系吩、概述
開發(fā)RN，必不可少的就是它的基礎(chǔ)框架react-native串慰。對(duì)于框架的學(xué)習(xí)绞灼，官網(wǎng)上有很多很詳細(xì)的介紹，這里就不多講了敷矫，ReactNative英文官網(wǎng)和ReactNative中文官網(wǎng)贞盯。像props、state等重要屬性都有講解沪饺，只是講的比較簡(jiǎn)單，不太好理解闷愤。如果感覺不好理解整葡，推薦去React官網(wǎng)看看。因?yàn)镽N就是基于reactjs來編寫的讥脐，下沉的去學(xué)習(xí)reactjs是使自己的操作更規(guī)范的一個(gè)不錯(cuò)方法遭居。
特別推薦一篇React 哲學(xué)，它主要講從UI設(shè)計(jì)到狀態(tài)處理旬渠，最后到數(shù)據(jù)流的一個(gè)過程俱萍。有一定基礎(chǔ)的RN開發(fā)一定要看看，特別重要告丢。
看完之后枪蘑，就被這句話圈粉了。岖免。岳颇。
二、生命周期圖譜
如圖颅湘，可以把RN組件生命周期大致分為三個(gè)階段：
- 第一階段：是組件第一次繪制階段话侧，如圖中的上面虛線框內(nèi)，在這里完成了組件的加載和初始化闯参；
- 第二階段：是組件在運(yùn)行和交互階段瞻鹏，如圖中左下角虛線框，這個(gè)階段組件可以處理用戶交互鹿寨，或者接收事件更新界面新博；
- 第三階段：是組件卸載消亡的階段，如圖中右下角的虛線框中释移，這里做一些組件的清理工作叭披。
三、生命周期函數(shù)
3.1getDefaultProps
在組件創(chuàng)建之前，會(huì)先調(diào)用getDefaultProps()涩蜘，這是全局調(diào)用一次嚼贡，嚴(yán)格地來說，這不是組件的生命周期的一部分同诫。在組件被創(chuàng)建并加載后粤策，首先調(diào)用getInitialState()，來初始化組件的狀態(tài)误窖。
3.2getInitialState
該函數(shù)用于對(duì)組件一些狀態(tài)進(jìn)行初始化叮盘，不同于getDefaultProps,在以后的過程中，會(huì)再次調(diào)用霹俺，所以可以將控制控件狀態(tài)的一些變量放在這里初始化柔吼，比如控件上顯示的文字，可以通過this.state來獲取值丙唧，通過this.setState來修改state值愈魏。注意：一旦調(diào)用了this.setState方法，組件一定會(huì)調(diào)用render方法想际，對(duì)組件進(jìn)行再次渲染培漏，不過，React框架會(huì)根據(jù)DOM的狀態(tài)自動(dòng)判斷是否需要真正渲染胡本。
3.3componentWillMount
準(zhǔn)備加載組件牌柄，會(huì)調(diào)用componentWillMount()，這個(gè)函數(shù)調(diào)用時(shí)機(jī)是在組件創(chuàng)建侧甫，并初始化了狀態(tài)之后珊佣，在第一次繪制render()之前∨冢可以在這里做一些業(yè)務(wù)初始化操作彩扔，也可以設(shè)置組件狀態(tài)。這個(gè)函數(shù)在整個(gè)生命周期中只被調(diào)用一次僻爽。
void componentWillMount()
3.4render
render函數(shù)會(huì)插入jsx生成的dom結(jié)構(gòu)虫碉，react會(huì)生成一份虛擬dom樹，在每一次組件更新時(shí)胸梆，在此react會(huì)通過其diff算法比較更新前后的新舊DOM樹敦捧，比較以后，找到最小的有差異的DOM節(jié)點(diǎn)碰镜，并重新渲染兢卵。
3.5componentDidMount
在組件第一次繪制之后，會(huì)調(diào)用componentDidMount()绪颖，通知組件已經(jīng)加載完成秽荤。這個(gè)函數(shù)調(diào)用的時(shí)候，其虛擬 DOM 已經(jīng)構(gòu)建完成，你可以在這個(gè)函數(shù)開始獲取其中的元素或者子組件了窃款。需要注意的是课兄，RN 框架是先調(diào)用子組件的componentDidMount()，然后調(diào)用父組件的函數(shù)晨继。從這個(gè)函數(shù)開始烟阐，就可以和 JS 其他框架交互了，例如設(shè)置計(jì)時(shí)setTimeout或者setInterval紊扬，或者發(fā)起網(wǎng)絡(luò)請(qǐng)求蜒茄。這個(gè)函數(shù)也是只被調(diào)用一次。這個(gè)函數(shù)之后餐屎，就進(jìn)入了穩(wěn)定運(yùn)行狀態(tài)檀葛，等待事件觸發(fā)。
void componentDidMount()
3.6componentWillReceiveProps
如果組件收到新的屬性（props）腹缩，就會(huì)調(diào)用componentWillReceiveProps()驻谆，輸入?yún)?shù)nextProps是即將被設(shè)置的屬性，舊的屬性還是可以通過this.props來獲取庆聘。在這個(gè)回調(diào)函數(shù)里面，你可以根據(jù)屬性的變化勺卢，通過調(diào)用this.setState()來更新你的組件狀態(tài)伙判，這里調(diào)用更新狀態(tài)是安全的，并不會(huì)觸發(fā)額外的render()調(diào)用黑忱。
void componentWillReceiveProps(object nextProps)
3.7shouldComponentUpdate
當(dāng)組件接收到新的屬性和狀態(tài)改變的話宴抚，都會(huì)觸發(fā)調(diào)用shouldComponentUpdate(...)，輸入?yún)?shù)nextProps和上面的componentWillReceiveProps函數(shù)一樣甫煞，nextState表示組件即將更新的狀態(tài)值菇曲。這個(gè)函數(shù)的返回值決定是否需要更新組件，如果true表示需要更新抚吠，繼續(xù)走后面的更新流程常潮。否者，則不更新楷力，直接進(jìn)入等待狀態(tài)喊式。默認(rèn)情況下，這個(gè)函數(shù)永遠(yuǎn)返回true用來保證數(shù)據(jù)變化的時(shí)候 UI 能夠同步更新萧朝。在大型項(xiàng)目中岔留，你可以自己重載這個(gè)函數(shù)，通過檢查變化前后屬性和狀態(tài)检柬，來決定 UI 是否需要更新献联，能有效提高應(yīng)用性能。
boolean shouldComponentUpdate(object nextProps, object nextState)
3.8componentWillUpdate
如果組件狀態(tài)或者屬性改變，并且上面的shouldComponentUpdate(...)返回為true里逆，就會(huì)開始準(zhǔn)更新組件进胯，并調(diào)用componentWillUpdate()，輸入?yún)?shù)與shouldComponentUpdate一樣运悲，在這個(gè)回調(diào)中龄减，可以做一些在更新界面之前要做的事情。需要特別注意的是班眯，在這個(gè)函數(shù)里面希停，你就不能使用this.setState來修改狀態(tài)。這個(gè)函數(shù)調(diào)用之后署隘，就會(huì)把nextProps和nextState分別設(shè)置到this.props和this.state中宠能。緊接著這個(gè)函數(shù)，就會(huì)調(diào)用render()來更新界面了磁餐。
void componentWillUpdate(object nextProps, object nextState)
3.9componentDidUpdate
調(diào)用了render()更新完成界面之后违崇，會(huì)調(diào)用componentDidUpdate()來得到通知，因?yàn)榈竭@里已經(jīng)完成了屬性和狀態(tài)的更新了诊霹，此函數(shù)的輸入?yún)?shù)變成了prevProps和prevState羞延。
void componentDidUpdate(object prevProps, object prevState)
3.10componentWillUnmount
當(dāng)組件要被從界面上移除的時(shí)候，就會(huì)調(diào)用componentWillUnmount()脾还，在這個(gè)函數(shù)中伴箩，可以做一些組件相關(guān)的清理工作，例如取消計(jì)時(shí)器鄙漏、網(wǎng)絡(luò)請(qǐng)求等嗤谚。
void componentWillUnmount()
3.11constructor
構(gòu)造函數(shù)在生命周期圖譜中沒有體現(xiàn)，但是它是組件構(gòu)造時(shí)候必須調(diào)用的函數(shù)怔蚌。constructor參數(shù)接受兩個(gè)參數(shù)props,context巩步，可以獲取到父組件傳下來的props,context,如果你想在constructor構(gòu)造函數(shù)內(nèi)部(注意是內(nèi)部哦，在組件其他地方是可以直接接收的)使用props或context,則需要傳入桦踊，并傳入super對(duì)象椅野。當(dāng)然如果你只需要在構(gòu)造函數(shù)內(nèi)使用props或者context，那么只傳入一個(gè)參數(shù)即可籍胯，如果都不可以鳄橘，就都不傳。注意：只要組件存在constructor,就必要要寫super,否則this指向會(huì)錯(cuò)誤芒炼。
四瘫怜、調(diào)用
歡迎大佬糾錯(cuò)指導(dǎo)，歡迎同行交流學(xué)習(xí)本刽。
GitHub：https://github.com/Code4GL
簡(jiǎn)書：http://www.reibang.com/u/7f5541a6b6d2
知乎：https://www.zhihu.com/people/code4gl/activities
公眾號(hào)：code_everything
QQ：771841496
郵箱：guanli1991@163.com
