RN-生命周期

export default class immoocApp extends React.Component {

  // 1.
  constructor(props) {
    super(props);
    this.state = { times: 0 }
  }

  // 2. 组件即将安装
  componentWillMount(){
    console.log('componentWillMount')
  }
  // 3. render一次
  // 4. 组件已经安装
  componentDidMount(){
    console.log('componentDidMount')
  }
  // 5. 组件是否要更新
  shouldComponentUpdate(){
    console.log('shouldComponentUpdate')
    return true
  }
  // 6. 组件将要刷新
  componentWillUpdate(){
    console.log('componentWillUpdate')
  }
  // 7. 再次render一次
  // 8. 组件正在刷新
  componentDidUpdate(){
    console.log('componentDidUpdate')
  }

  timesPlus() {
    let times = this.state.times
    times++
    this.setState({
      times: times
    })
  }
  // 3/7. render
  render() {
    console.log('render')
    return (
      <View style={{
        flex: 1,
        justifyContent: "center",
        flexDirection: "column",
        alignItems: 'center',
        margin: 60,
        backgroundColor: 'yellow'
      }}>
        <View style={styles.ViewForTextStyle}>
          <Text style={styles.textStyle} onPress={this.timesPlus.bind(this)}>
            有本事来点我啊
          </Text>
        </View>
        <View style={styles.ViewForTextStyle}>
          <Text style={styles.textStyle}>
            你点了我{this.state.times}次
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  textStyle: {
    height: 40,
    width: 200,
    textAlign: 'center',
    justifyContent: 'center',
    backgroundColor: 'green'
  },
  ViewForTextStyle: {
    height: 100,
    width: 200,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  }
});

猜你喜欢

转载自blog.csdn.net/weixin_33947521/article/details/86960044
今日推荐