React-Native之生命周期函数

概述

不管是iOS还是Android开发，都离不开'生命周期'这一说。所谓的生命周期指的就是：程序从开始运行直至程序退出结束的这么一个过程。在这个过程中所触发的一些函数方法，就成为生命周期函数。理解生命周期，这是每一个开发者都所必须掌握的知识。学习RN也不例外。

LifeCycle.jpg

• 生命周期可以分为三个阶段：
  • 初始化阶段(红色部分)：在这里完成组件的第一次加载和初始化工作。
  • 运行阶段(蓝色部分)：这个阶段组件可以处理交互和界面更新的一些事情。
  • 销毁阶段(绿色部分)：这个阶段是销毁组件，回收内存空间。

初始化阶段

• getDefaultProps
  在组件创建之前调用。一般在该方法中定义一些全局的常量。注意：如果父组件传递过来的Props和你在该函数中定义的Props的key一样，将会被覆盖。

  • ES6写法

    // 在方法外面定义props常量
    Demo.defaultProps = {name : '常量'}
    
    export default class Demo extends Component {      
     render() {
        return (
              <View style={styles.container}>
                    <Text> {this.props.name} </Text>
              </View>
        );
     }
    }
    

• getInitialState
  初始化组件的时候被调用。一般在该函数中定义一些全局的变量。

  • 这是ES5的写法，ES6写法是在构造函数 constructor(props) 初始化 state，然后在需要修改的时候调用 setState。

    export default class Demo extends Component {      
        // 在这里定义变量
        constructor(props) {
          super(props)
          this.state = { name : '变量', }
        }
    
       render() {
          return (
                <View style={styles.container}>
                      <Text onPress = {this.renderRename()}
                      > {this.state.name} </Text>
                </View>
          );
       }
    
       renderRename() {
           // 修改变量
           this.setState(
               name : '哈哈',
           )
       }
    }
    

• componentWillMount
  组件即将加载的时候被调用。这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。

• render
  组件渲染函数，会返回一个Virtual DOM，只允许返回一个最外层容器组件。render函数尽量保持纯净，只渲染组件。

• componentDidMount
  组件已经加载完成。这个函数调用的时候，其虚拟 DOM 已经构建完成，你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是，RN 框架是先调用子组件的 componentDidMount()，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。一般在该函数中处理一些复杂耗时的操作。

运行阶段

• componentWillReceiveProps(nextProps)
  props改变(父容器来更改或是redux)，将会调用该函数。新的props将会作为参数传递进来，老的props可以根据this.props来获取。输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取。在这个回调函数里面调用 this.setState() 来更新你的组件状态，并不会额外触发 render() 调用。

• shouldComponentUpdate(object nextProps, object nextState)
  当组件接收到新的属性和状态改变的话，都会触发调用。输入参数nextProps 是即将被设置的属性，nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。在某些特定条件下，我们可以根据传递过来的props和state来选择更新或者不更新，从而提高效率。

• componentWillUpdate(object nextProps, object nextState)
  如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并开始被调用。 输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。

• componentDidUpdate(object prevProps,object prevState)
  组件更新之后被调用。

销毁阶段

• componentWillUnmount()
  该函数中主要是做一些组件的销毁或清理操作。

props 和 state

• 相同点：

  1.不管是props还是state发生改变，都会调用render()重新渲染。
  2.都可以设定初始值。
  

• 不同点

  1.初始值来源：state的初始值来自于自身的getInitalState（constructor）函数；props来自于父组件或者自身getDefaultProps（若key相同前者可覆盖后者）。
  2.修改方式：state只能在自身组件中setState，不能由父组件修改；props只能由父组件修改，不能在自身组件修改。
  3.对子组件：props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件；state代表的是一个组件内部自身的状态，只能在自身组件中存在。