ReactNative的生命周期以運行時的狀態來區分,可分為三類:
Mounting
Updating
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
Unmounting
當剛創建組件時,所調用方法的順序如下:
Paste_Image.png
當刷新組件時,所調用方法的順序如下:
Paste_Image.png
圖中無componentWillReceiveProps方法的調用,是因為刷新時并未改變props對象。注意,組件初次被渲染時componentWillReceiveRrops方法并不會被觸發。
props與state
聲明Prop Types和Default Props
ES6
class Greeting extends Component {
// ...
}
Greeting.propTypes = { name: React.PropTypes.string};
Greeting.defaultProps = { name: 'Mary'};
ES5,getDefalutProps需要聲明為函數
let Greeting = React.createClass({
propTypes: { name: React.PropTypes.string },
getDefaultProps: function() {
return { name: 'Mary' };
},
// ...});
初始化state
ES6
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
// ...
}
ES5,聲明一個名為getInitialState的函數
let Counter = React.createClass({
getInitialState: function() {
return {
count: this.props.initialCount};
},
// ...
});