来说一说React Native组件的生命周期

来说一说React Native组件的生命周期

猿掌柜
2019-01-07 / 0 评论 / 57 阅读 / 正在检测是否收录...


React Native组件的生命周期大致上可以划分为实例化阶段、存在阶段和销毁阶段,其中最常用的为实例化阶段,该阶段就是组件的构建、展示时期,需要我们根据几个函数的调用过程,控制好组件的展示和逻辑的处理。在下图中描述了React Native中组件的生命周期,我们可以根据其中的执行顺序在对应的函数中做对应的操作

实例化阶段函数功能分析

  • getDefaultProps

    该函数用于初始化一些默认的属性,通常会将固定的内容放在这个函数 中进行初始化和赋值;  
    在组件中,可以利用this.props获取在这里初始化它的属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps函数,所以组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改。
    
  • getInitialState

    该函数是用于对组件的一些状态进行初始化;  
    由于该函数不同于getDefaultProps,在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值, 比如:  
    this.setState({  
    activePage: activePage,  
    currentX: contentOffSetX  
    });  
    注意:一旦调用了this.setState方法,组件一定会调用render方法,对组件进行再次的渲染,不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。
    
  • componentWillMount

    相当于OC中的ViewWillAppear方法,在组件将要被加载在视图上之前调用,功能相对较少。如果在render中改变了某些状态机变量,那么RN不会执行渲染,而是等待该函数执行完毕后再次渲染。子组件中同样拥有该方法,并会在父组件执行完毕后执行,该函数无返回值。该函数适合于需要在本地读取一些数据用于显示,那么在render执行前调用是一个很好的时机。
    
  • render

    render是一个组件中必须有的方法,本质上是一个函数,并返回JSX或其他组件来构成DOM,和Android的XML布局类似,注意:只能返回一个顶级元素 ;  
    此外,在render函数中,只可通过this.state和this.props来访问在之前函数中初始化的数据值 。
    
  • componentDidMount

    在调用了render方法后,组件加载成功并被成功渲染出来以后,所要执行的后续操作,一般会在这个函数中处理网络请求等加载数据的操作;  
    因为UI已经成功被渲染出来, 所以放在这个函数里进行请求操作,不会出现UI上的错误。
    
    

在实例化阶段,我们可以通过一个示例来了解,通过触摸事件来改变函数的变量值:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  AlertIOS
} from 'react-native';


// ES5写法
var DTouchabelDemo = React.createClass({
  // 不可改变的值
  getDefaultProps(){
     return{
        age: 18
     }
  },

 // 可以改变的值
  getInitialState(){
     return{
       title:'不透明触摸',
       person: '张三'
     }
  },

  render() {
    return (
        <View ref="topView" style={styles.container}>
          <TouchableOpacity
              activeOpacity={0.5}
              onPress={()=>this.activeEvent('点击')}
              onPressIn={()=>this.activeEvent('按下')}
              onPressOut={()=>this.activeEvent('抬起')}
              onLongPress={()=>this.activeEvent('长按')}
              >
            <View style={styles.innerViewStyle}>
              <Text ref="event">常用的事件</Text>
            </View>
          </TouchableOpacity>

          <View>
              <Text>{this.state.title}</Text>
              <Text>{this.state.person}</Text>
              <Text>{this.props.age}</Text>
          </View>
        </View>
    );
  },

  activeEvent(event){
    // 更新状态机
     this.setState({
        title: event,
        person:'李四'
     })

    // 拿到View
    this.refs.topView
    this.refs.event
  }
});

// ES6写法
// class DTouchabelDemo extends Component {
//
// }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  innerViewStyle:{
    backgroundColor:'red'
  }
});

AppRegistry.registerComponent('DTouchabelDemo', () => DTouchabelDemo);

存在期阶段函数功能分析

  • componentWillReceiveProps

    指父元素对组件的props或state进行了修改,该函数的原型为componentWillReceiveProps(nextProps),当props(属性)发生改变或者接受到新的props时,该函数被调用,并接受一个输入参数,类型为Object,存放新的props,原先反生改变的旧的props仍然可以通过this.props访问。该函数在RN初次被渲染的时候不会被调用。如果在该函数当中对状态机变量进行了修改,RN不会立即渲染页面,而是会等待该方法执行完毕后一起渲染。
    
  • shouldComponentUpdate    (组件是否需要更新)

    该函数原型 : boolean shouldComponentUpdate(nextProps,nextState),一般用于优化,可以返回false或true来控制是否进行渲染,当props(属性)或者状态(state)发生改变的时候会触发该函数,分别对应接收的两个参数,根据返回的布尔值来决定是否需要对页面进行重新渲染,如果不进行渲染,那么该方法后续的componentWillUpdate与componentDidUpdate都不会被执行。该函数默认会返回true。应用场景:可以在该函数中编写一些逻辑来判断渲染类型,来阻值一些没有必要的重新渲染,达到提升应用运行效率的目的。
    
  • componentWillUpdate

    该方法原型与上一方法相同,在重新渲染前会调用该方法,为渲染进行准备工作。组件刷新前调用,类似componentWillMount。注意:在该方法中,不应该对状态机变量进行修改,要改变,也应该在1.1.5当中进行。
    
  • componentDidUpdate

    更新后的hook,该方法会在RN卸载之前调用,无参无返回值,在该方法中,需要对该组件当中申请或者订阅的某些资源与消息进行释放。
    
    

销毁期阶段函数功能分析

用于清理一些无用的内容,如:点击事件Listener,只有一个过程:componentWillUnmount

0

评论 (0)

取消