ReactNative基础（二）了解组件的生命周期

此博客基于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()当组件完全渲染完毕后执行，这个函数也会是我们后面学习用的最多的一个。这里就最适合做界面的数据操作了例如：访问网络、数据库操作、数据初始化。

生命周期第二部分（更新）：我们来写代码模拟一下

• 在构造函数中定义一个变量
• 如果对State不熟悉的可以先看下文档了解一下

constructor(props) {    super(props);    this.state = {        count: 0    }}

• 添加两个文本，一个用来实现点击事件更新State（状态机）；一个用来显示count变量的值

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>    );}

以上就是一个组件在常规操作中生命周期所执行的顺序，当然在日常开发中肯定就不会是这种常规操作了；这个就以后在讨论了。

源码地址链接

推荐阅读：

• ReactNative基础（一）编写一个登录页面