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基础（一）编写一个登录页面