美文网首页
RN-生命周期

RN-生命周期

作者: ShenYj | 来源:发表于2019-01-21 08:43 被阅读14次
    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',
      }
    });
    

    相关文章

      网友评论

          本文标题:RN-生命周期

          本文链接:https://www.haomeiwen.com/subject/aeyqjqtx.html