ReactNative中组件的生命周期

React-Native生命周期

开发中组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。下图为ReactNative中组件的生命周期，根据执行顺序在对应的函数中做对应的操作

这张经典的图描述了ReactNative组件从创建、运行到销毁的整个过程，其中经常用到的是创建过程，初始化的时候会调用5个函数，这5个函数在整个组件创建到销毁的过程中只调用一次。

初始化过程

getDefaultProps （ES6废除了这样的写法）

• 该函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数 中进行初始化和赋值，一般放置一些常量
• 在组件中，可以利用this.props获取在这里初始化它的属性
• 由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。
• 注意：如果父组件传递过来的Props和你在该函数中定义的Props的key一样，将会被覆盖

getInitalState（ES6废除了这样的写法）

• 该函数是用于对组件的一些状态进行初始化，一般放置一些变量
• 由于该函数不同于getDefaultProps，在以后的过程中，会再次调用
• 所以可以将控制控件的状态的一些变量放在这里初始化，可以通过this.state来获取值、修改state值， 比如：

this.setState({
    name:testName, 
});

• 注意：
  
  • 一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。只有改变才会重新渲染，这种状态被称为状态机
  • 为了在使用中不出现空值，建议初始化state的时候尽可能给每一个可能用到的值都赋一个初始值。
  -

componentWillMount

• 在render前，getInitalState之后调用。仅调用一次，可以用于改变state操作
• 相当于OC中的ViewWillAppear方法

render

• 组件渲染函数，会返回一个Virtual DOM，只允许返回一个最外层容器组件。render函数尽量保持纯净，只渲染组件，不修改状态，不执行副操作（比如计时器）
• 在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值

componentDidMount

• 在调用了render方法后，React会根据Virtual DOM来生成真实DOM，生成完毕后会调用该函数。
• 主要在该函数中执行网络请求，定时器开启等加载数据的操作
• 因为UI已经成功被渲染出来， 所以放在这个函数里进行请求操作，不会出现UI上的错误。

---

运行过程

componentWillReceiveProps

• props改变（父容器来更改或是redux），将会调用该函数。新的props将会作为参数传递进来，老的props可以根据this.props来获取。我们可以在该函数中对state作一些处理,其实就是指父元素对组件的props或state进行了修改
• 注意：在该函数中更新state不会引起二次渲染。

shouldComponentUpdate

• 该函数传递过来两个参数，新的state和新的props。state和props的改变都会调到该函数。该函数主要对传递过来的nextProps和nextState作判断。如果返回true则重新渲染，如果返回false则不重新渲染。在某些特定条件下，我们可以根据传递过来的props和state来选择更新或者不更新，一般用于优化，提高效率。

componentWillUpdate

• 组件刷新前调用，类似componentWillMount
• 组件上会接收到新的props或者state渲染之前，调用该方法。但是不可以在该方法中更新state和props。

componentDidUpdate

• 和初始化时期的componentDidMount类似，在render之后，真实DOM生成之后调用该函数。传递过来的是当前的props和state。在该函数中同样可以使用this.getDOMNode()来拿到相应的DOM节点。如果你需要在运行中执行某些副操作，请在该函数中完成

---

销毁过程

componentWillUnmount

• 用于清理一些无用的内容。在这里进行一些相关的销毁操作，比如定时器，监听等等

---

props和state

• 关于Props（ES6的写法）

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Platform,
  StyleSheet,
  View,
  Text,
} from 'react-native';

class BClass extends Component<{}> {
    render() {
        console.log('title变化',this.props.title);
      return (
        <View>
              <Text>{this.props.title}</Text>
        </View>
      );
    }
}
BClass.propTypes = {
    title:PropTypes.String
};
BClass.defaultProps = {title:'xiaoming'};

export default class AClass extends Component<{}> {
  render() {
    return (
        <View style={styles.container}>
            {/* 显示初始值 */}
            <BClass />
            {/* 变化值 */}
            <BClass title = 'xiaobai'/>
        </View>
    );
  }
}

定义了BClass且title的默认值为xiaoming，然后通过它的父组件AClass给BClass中title赋值，然后打印log
log：

可以看出原先的xiaoming被修改成了xiaobai

• 关于State（ES6的写法）

export default class AClass extends Component<{}> {

  constructor(props){
      super(props);
          this.state = {
            name : '000'
        };
        console.log('初始化' +'name:'+this.state.name + ' ' + 'age:'+this.state.age);
    }
   componentWillMount(){
         this.setState({
             name : 'AAA',
             age:16
        })
   }

  render() {
    console.log('改变前' +'name:'+this.state.name + ' ' + 'age:'+this.state.age);
    return (

        <View style={styles.container}>
            <Text>{this.state.name} </Text>
            <Text>{this.state.age} </Text>
        </View>
    );
  }


  componentDidMount(){
         this.setState({
             name : 'BBB',
             age:18
        })
        console.log('改变后' + 'name:'+this.state.name + ' ' + 'age:'+this.state.age);
   }
}

可以看到，初始化之后
初始化一个state为name，然后在componentWillMount函数和componentDidMount函数中改变已经初始化的name和没有声明age，打印出来
log：

当componentDidMount函数执行完之后依然会引发render再次渲染

• 关于Prop和State的区别，

  • 相同点

    1.不管是props还是state的改变，都会引发render的重新渲染。

    2.都能由自身组件的相应初始化函数设定初始值。

  • 不同点

    1.初始值来源：state的初始值来自于自身的getInitalState（constructor）函数；props来自于父组件或者自身getDefaultProps（若key相同前者可覆盖后者）。

    2.修改方式：state只能在自身组件中setState，不能由父组件修改；props只能由父组件修改，不能在自身组件修改。

    3.对子组件：props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件；state代表的是一个组件内部自身的状态，只能在自身组件中存在。

盗用网上的一张图：