React Native 组件的生命周期

一、如图,该图描述了React Native 组件的生命周期。

image.png

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

二、实例化阶段函数功能分析

    getDefaultProps
该函数用于初始化一些默认的属性,通常会将固定的内容放在这个函数 中进行初始化和赋值;
在组件中,可以利用this.props获取在这里初始化它的属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps函数,所以组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改。
  getInitialState
   该函数是用于对组件的一些状态进行初始化;
   由于该函数不同于getDefaultProps,在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值, 比如:

this.setState({
selectIndex: selectIndex,
currentY: contentOffSetY
});
注意:一旦调用了this.setState方法,组件一定会调用render方法,对组件进行再次的渲染,不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。

    componentWillMount
相当于OC中的ViewWillAppear方法,在组件将要被加载在视图上之前调用,功能相对较少。
    render
  render是一个组件中必须有的方法,本质上是一个函数,并返回JSX或其他组件来构成DOM,和Android的XML布局类似,注意:只能返回一个顶级元素 ;
   此外,在render函数中,只可通过this.state和this.props来访问在之前函数中初始化的数据值 。
componentDidMount
   在调用了render方法后,组件加载成功并被成功渲染出来以后,所要执行的后续操作,一般会在这个函数中处理网络请求等加载数据的操作;
   因为UI已经成功被渲染出来, 所以放在这个函数里进行请求操作,不会出现UI上的错误。
  下面的代码是利用了fetch API来异步请求Web API来加载数据:
  componentDidMount(){
    this.loadData();
  }

  loadData(){
    fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
  }

三、存在期阶段函数功能分析

componentWillReceiveProps    

指父元素对组件的props或state进行了修改

shouldComponentUpdate    

一般用于优化,可以返回false或true来控制是否进行渲染

componentWillUpdate

组件刷新前调用,类似componentWillMount

componentDidUpdate

更新后的hook
四、销毁期阶段函数功能分析
用于清理一些无用的内容,如:点击事件Listener,只有一个过程:componentWillUnmount

五、常用知识点分析
5.1 this.state
开发中组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。
举个例子:

constructor(props) {
    super(props);
    this.isGoodeGuy = true;
    this.state = {
      content:'what a person are you ?'
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>{
          this.setState({content:this.isGoodeGuy?'好人':'烂人'})
        }}>
          <Text>{this.state.content}</Text>
        </TouchableOpacity>
      </View>
    );
  }
   当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

  可以把组件看成一个“状态机”. 根据不同的status有不同的UI展示。只要使用setState改变状态值,根据diff算法算出来有差以后,就会执行ReactDom的render方法,重新渲染页面。

   注意:由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容