
實例化階段函數(shù)功能分析
getDefaultProps
該函數(shù)用于初始化一些默認的屬性,通常會將固定的內(nèi)容放在這個函數(shù) 中進行初始化和賦值; 在組件中,可以利用this.props獲取在這里初始化它的屬性,由于組件初始化后,再次使用該組件不會調(diào)用getDefaultProps函數(shù),所以組件自己不可以自己修改props(即:props可認為是只讀的),只可由其他組件調(diào)用它時在外部修改。
getInitialState
該函數(shù)是用于對組件的一些狀態(tài)進行初始化; 由于該函數(shù)不同于getDefaultProps,在以后的過程中,會再次調(diào)用,所以可以將控制控件的狀態(tài)的一些變量放在這里初始化,如控件上顯示的文字,可以通過this.state來獲取值,通過this.setState來修改state值, 比如:this.setState({ activePage: activePage, currentX: contentOffSetX }); 注意:一旦調(diào)用了this.setState方法,組件一定會調(diào)用render方法,對組件進行再次的渲染,不過,如果React框架會自動根據(jù)DOM的狀態(tài)來判斷是否需要真正的渲染。
componentWillMount
相當于OC中的ViewWillAppear方法,在組件將要被加載在視圖上之前調(diào)用,功能相對較少。render render是一個組件中必須有的方法,本質(zhì)上是一個函數(shù),并返回JSX或其他組件來構成DOM,和Android的XML布局類似,注意:只能返回一個頂級元素 ; 此外,在render函數(shù)中,只可通過this.state和this.props來訪問在之前函數(shù)中初始化的數(shù)據(jù)值 。
componentDidMount
在調(diào)用了render方法后,組件加載成功并被成功渲染出來以后,所要執(zhí)行的后續(xù)操作,一般會在這個函數(shù)中處理網(wǎng)絡請求等加載數(shù)據(jù)的操作; 因為UI已經(jīng)成功被渲染出來, 所以放在這個函數(shù)里進行請求操作,不會出現(xiàn)UI上的錯誤。
存在期階段函數(shù)功能分析
componentWillReceiveProps
指父元素對組件的props或state進行了修改
shouldComponentUpdate
一般用于優(yōu)化,可以返回false或true來控制是否進行渲染
componentWillUpdate
組件刷新前調(diào)用
componentWillMount
componentDidUpdate
更新后的hook
componentWillUnmount
卸載組件
state&&props
this.props 和 this.state 都用于描述組件的特性,可能會產(chǎn)生混淆。一個簡單的區(qū)分方法是,this.props 表示那些一旦定義,就不再改變的特性,而 this.state 是會隨著用戶互動而產(chǎn)生變化的特性。