此博客基于react-native-0.48.4
生命周期这个词大家一听肯定是不陌生了，在Android中有Activity、Fragment、Service…的生命周期（请原谅我是个小Android）；那在ReactNative中组件也是一样有个生命周期的，来引用经典的生命周期流程图：
注意：
- Es5下的
getDefaultProps在Es6上对应的函数是static defaultProps - Es5下的
getInitialState在Es6上对应的函数是constructor(props) - 整个生命周期主要是分为三部分装载(Mounting)、更新(Updating)、卸载(Unmounting)
- 写一个案例重写这里面的所有生命周期函数来进行测试，加深记忆。
新建一个LifeCycle.js Component重写生命周期函数。
class LifeCycle extends Component {
//1.构造函数 数据的初始化
constructor(props) {
super(props);
console.log('--constructor--');
}
//2.在初始化渲染执行（render()）之前立刻调用
componentWillMount() {
console.log('--componentWillMount--');
}
//3.渲染组件
render() {
console.log('--render--');
return (
<View style={styles.container}>
<Text>测试生命周期</Text>
</View>
);
}
//4.组件第一次（也就是初始化）渲染完成 适合做网络请求 数据操作
componentDidMount() {
console.log('--componentDidMount--');
}
//5.当state中的状态被改变是 组件会更新
shouldComponentUpdate(nextProps,nextState) {
console.log('--shouldComponentUpdate--');
return true;
}
//6.组件马上就要更新了 > 又回到 第3步 开始重新渲染 在执行 第7步 完成渲染
componentWillUpdate(nextProps,nextState) {
console.log('--componentWillUpdate--');
}
//7.组件更新完成
componentDidUpdate(nextProps,nextState) {
console.log('--componentDidUpdate--');
}
//8.组件被卸载时调用
componentWillUnmount(nextProps,nextState) {
console.log('--componentWillUnmount--');
}
}
生命周期第一部分（装载）：我们来运行这个组件并查看log
- 这一部分函数则是上面所提到的组件装载，render()这个函数就是负责渲染界面上的元素，显示文本、按钮、图片…
componentDidMount()当组件完全渲染完毕后执行，这个函数也会是我们后面学习用的最多的一个。这里就最适合做界面的数据操作了例如：访问网络、数据库操作、数据初始化。
生命周期第二部分（更新）：我们来写代码模拟一下
constructor(props) { super(props); this.state = { count: 0 } }
render() {
return (
<View style={styles.container}>
{/*模拟组件状态被改变（state）*/}
<Text onPress={() => {
{/*更新状态机中count的值*/}
this.setState({
count: this.state.count + 1,})
}}>有本事你点我呀</Text>
<Text>被点了{this.state.count}次</Text>
</View>
);
}
- 当State中的值发生了变化，生命周期就会执行Updating中的函数我们看下执行的效果
- 每点击一次更新State，那么他就会依次执行
shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate
生命周期第三部分（卸载）：这里需要在加载这个LifeCycle.js组件的地方做手脚了，也就是在index.android.js入口中修改。
//引入LifeCycle组件
var Life = require("./src/js/LifeCycle");
constructor(props) {
super(props);
this.state = {
//定义一个标志位，是否加载组件
remove: false,}
}
render() {
//模拟组件的装载和卸载 生命周期
var view = this.state.remove ? null : <Life/>;
var text = this.state.remove ? "(点击装载)已被卸载" : "(点击卸载)已被装载";
return (
<View style={styles.container}>
{view}
<Text onPress={() => {
this.setState({
remove: !this.state.remove,})
}} style={{marginTop: 15}}>{text}</Text>
</View>
);
}
以上就是一个组件在常规操作中生命周期所执行的顺序，当然在日常开发中肯定就不会是这种常规操作了；这个就以后在讨论了。
