ReactNaive组件生命周期（六）

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ReactNaive组件生命周期

• 任何一个组件都是有生命周期的，我们经常需要在组件的生命周期中做一些事情，比如创建组件的时候或者组件销毁的时候。
• 组件生命周期大致分为三个阶段，实例化阶段，运行阶段，销毁阶段。

组件生命周期

组件生命周期.png

实例化阶段

• constructor:
  • 什么时候调用:在一开始实例化组件的时候调用
  • 作用:初始化state.
• componentWillMount:
  • 什么时候调用:即将加载组件的时候调用
  • 作用:在render之前做事情
• render:
  • 什么时候调用:渲染组件的时候调用
  • 作用:通过这个方法
• componentDidMount:
  • 什么时候调用:加载组件完成的时候调用
  • 作用:在render之后做事情，发送请求
• 注意：constructor，componentWillMount，componentDidMount只会调用一次
• 运行结果

创建阶段.png

运行阶段

• componentWillReceiveProps:

  • 什么时候调用:每次传入Props，就会调用
  • 作用:拦截props

• shouldComponentUpdate:

  • 什么时候调用:每次props,或者state改变，就会调用
  • 作用:控制是否刷新界面

• componentWillUpdate:

  • 什么时候调用:组件即将更新调用
  • 作用:在render更新前做事情

• componentDidUpdate:

  • 什么时候调用:组件更新完成调用
  • 作用:在render更新后做事情

• 注意：绝对不要在componentWillUpdate，componentDidUpdate中调用this.setState方法，否则将导致无限循环调用，在componentWillReceiveProps，shouldComponentUpdate可以。

• 运行效果

修改state.png

修改props.png

销毁阶段

• componentWillUnmount:
  • 什么时候调用:组件即将销毁的时候调用
  • 作用:移除观察者，清空数据

使用

class LifeCompoent extends Component {

    constructor(props){
        super(props);

        self.state = {
            age:0
        }

        console.log('constructor');
    }

    componentWillMount() {
        console.log('componentWillMount');
    }

    componentDidMount() {
        console.log('componentDidMount');
    }

    shouldComponentUpdate() {
        console.log('shouldComponentUpdate');

        return true;
    }

    componentWillReceiveProps() {
        console.log('componentWillReceiveProps');

    }

    componentWillUpdate() {
        console.log('componentWillUpdate');
        this.setState({
            age:1
        });
    }

    componentDidUpdate() {
        console.log('componentDidUpdate');
    }

    componentWillUnmount() {
        console.log('componentWillUpdate');
    }

    render(){
        console.log('render');
        return (
            <View style={styles.lifeStyle} >
                <Text onPress={()=>{
                    this.setState({
                        age:1
                    });
                }}>修改state</Text>
            </View>
        );
    }
}

export default class ReactDemo extends Component {
    constructor(props){
        super(props);
        this.state = {
            name:'xmg'
        }
    }

    render() {
        return (
            <View style={{flex:1,marginBottom:50}}>
            <LifeCompoent name={this.state.name} />
                <Text onPress={()=>{
                    this.setState({
                        name : 'yz'
                    })
                }}>修改props</Text>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    lifeStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
});

AppRegistry.registerComponent('React', () => ReactDemo);