RN组件的生命周期

 

 

来自：http://www.devio.org/tags/#React%20Native 

 

最新版抛弃了一些方法

 

  constructor(props) {
    super(props);

    console.log('constructor')
    this.state=({
      title:'是'
    })
    this.textPress = this.textPress.bind(this);
  }

  //有了这个方法 带UNSAFE_前缀的都可以移除了
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log(prevState)
    console.log('getDerivedStateFromProps')
    console.log(nextProps)

    // 否则，对于state不进行任何操作
    return null;
  }

  UNSAFE_componentWillMount(){
    console.log('UNSAFE_componentWillMount')
  }

  render() {
    console.log('render')
    return (
       <View style={{justifyContent: 'center',flex: 1,flexDirection: 'row',alignItems: 'center'}}>
       <TouchableOpacity onPress={()=>this.textPress()}>
          <Text>{this.state.title}</Text>
       </TouchableOpacity>

       </View>
    );
  }

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

  UNSAFE_componentWillReceiveProps(){
    console.log('UNSAFE_componentWillReceiveProps')
  }

  shouldComponentUpdate(){
    return true;
    console.log('shouldComponentUpdate')
  }

  UNSAFE_componentWillUpdate(){
    console.log('UNSAFE_componentWillUpdate')
  }

  //进入render...

  getSnapshotBeforeUpdate(){
    console.log('getSnapshotBeforeUpdate')
  }

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