ReactNative系列（二）：组件生命周期详解

ReactNative.jpg

ReactNative整理：《ReactNative系列》

一、简述

  类似Android和iOS开发中的生命周期，ReactNative中的组件也存在生命周期，代表着每个组件从创建到销毁的经历的整个过程。详细理解生命周期，是搞开发的小伙伴们的必修课，真正理解了Lifecycle，能帮助我们更高效更合理的开发。下面贴张生命周期图：

组件生命周期图.jpg

从图中就可以看出，组件的生命周期分为三个部分：

• 实例化阶段：负责页面数据和状态的初始化，以及页面渲染、展示、逻辑处理；
• 运行展示阶段：负责页面展示及事件交互，根据操作对页面元素进行调整或重新渲染；
• 卸载销毁阶段：负责移除Virtual DOM中的一些数据结构，回收组件事件，解绑监听器Listener或者释放定时器，取消网络请求等；

注释：
Q: 什么是Virtual DOM？
A: Virtual DOM是虚拟文档对象模型（Document Object Model，DOM），简单来说，它是React框架中的重要组成部分。用户操作或页面渲染都需要真实DOM的结构调整或重新计算，但是频繁调用DOM造成的性能损耗相对于其他操作是很大的，前端开发中都是尽量保持较小次数的DOM操作来提高性能。而虚拟DOM会重新构建DOM树，通过diff算法，将当前DOM树和之前的进行比较，得到前后DOM树的区别，然后仅仅把变化的部分映射到真实DOM上，从而提高渲染性能。

二、阶段拆分

1. 实例化阶段

• getDefaultProps：获取组件初始props属性的方法，往往是从父组件传递过来的属性值，是ES5的写法，ES6中已废除。在ES6中用静态方法static defaultProps = {}替代。可以利用this.props获取属性值，该函数全局只调用一次，所以组件不能自己修改props，只有其他组件调用时，在外部修改。
• getInitialState：用于初始化组件的状态，一般初始化的都是变量，利用this.state获取状态值。该函数能多次调用，如果想要修改组件状态state值，必须用this.setState()的方式来修改，同样也是ES5的写法，ES6中已经废除。ES6中用构造方法constructor(props)初始化状态值。

// ES5写法
var Demo = React.createClass({
  getDefaultProps() { // 初始化属性值
    return {
      title: '简书',
      content: '组件生命周期'
    };
  },
  getInitialState() { // 初始化状态值
    return {
      number: 20
    };
  },
  render () {
    return (
      <View></View>
    );
  },
});

// ES6第一种写法
class Demo extends Component {
  // 初始化属性值
  static defaultProps = { // 默认属性值
    title: '简书',
    content: '组件生命周期'
  };
  static propTypes = { // 属性值类型
    title: PropTypes.string,
    content: PropTypes.string
  };
  constructor(props) {
    super(props);
    // 组件状态变量声明
    this.state = {
      number: 20
    };
  }

  render() {
    return (
      <View></View>
    );
  }
}

// ES6第二种写法
class Demo extends Component {
  constructor(props) {
    super(props);
    // 组件状态变量声明
    this.state = {
      number: 20
    };
  }
}
Demo.defaultProps = {
  title: '简书',
  content: '组件生命周期'
};
Demo.propTypes = {
  title: PropTypes.string,
  content: PropTypes.string
}

• componentWillMount：在组件被渲染到视图上之前调用，整个生命周期中只调用一次！可以在该函数中进行业务初始化，或者设置组件状态。（适合做非网络请求的状态设置和修改）
• render：render函数是主渲染函数，是组件中必须存在的方法。会返回一个由JSX或其他组件构成的Virtual DOM，只允许返回一个最顶层容器组件。不能在渲染组件的时候更改组件状态，否则会进入死循环--setState -> render -> setState...
• componentDidMount：render之后，React框架会根据之前返回的虚拟DOM生成真实DOM，生成之后就会调用该函数，通知组件已经加载完毕。可以在该函数中进行网络请求，或者是加入定时器。在生命周期中也是只调用一次！

2. 运行展示阶段

• componentWillReceiveProps：组件props改变时调用（父组件更改或通过状态管理框架修改），新的props会以参数的形式传进来，旧的props还是通过this.props来获取。可以根据props的变化来调用this.setState()更新组件状态。在该函数中修改组件状态state不会引起二次render渲染！

  void componentWillReceiveProps(Object nextProps) {}
  

注：不管是props还是state的更改，都需要经过shouldComponentUpdate函数。在componentWillReceiveProps函数中修改状态，会统一进入shouldComponentUpdate进行处理，所以不会二次渲染。

• shouldComponentUpdate：

  boolean shouldComponentUpdate(Object nextProps, Object  nextState) {}
  

返回的布尔值来决定组件是否需要重新渲染!
 携带的两个参数分别代表新的props和新的state，通过新旧props和state的对比来判断渲染逻辑，如果需要渲染，返回true，会继续调用后面的周期函数；如果不需要，返回false，进入运行状态，等待下次更新操作。
 默认情况下，函数返回值为true。如果有特定的判断条件或业务逻辑处理，可以选择更新或不更新，则能够在该函数中做优化，提高性能。

• componentWillUpdate：

  void componentWillUpdate (Object nextProps, Object nextState) {}
  

 携带的参数同样为新的props和state。组件刷新前调用，在该回调函数中，可以做一些页面更新前要做的操作。有些类似componentWillMount，但是不能修改和更新组件state。
 该函数调用过之后，就会把nextProps和nextState分别赋给this.props和this.state。

• componentDidUpdate：调用完render函数，生成真实DOM之后回调该函数，类似componentDidMount传递过来的参数是当前的props和state。因为到这个方法时，已经完成了props和state的更新，所以输入参数变成了prevProps和prevState。

  void componentDidUpdate(Object prevProps, Object prevState) {}
  

3. 卸载销毁阶段

• componentWillUnmount：组件移除销毁时调用，主要做资源的回收释放和相关清理，例如：解绑监听器，取消计时器或者取消网络请求等。

三、总结

 RN组件的生命周期介绍完了，熟悉这些周期函数的特性，对开发小伙伴有不小的帮助，希望能帮到大家！！！

周期函数	调用次数	是否能setState()
defaultProps(getDefaultProps)	1	否
constructor(getInitialState)	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	否
componentDidUpdate	>=0	否
componentWillUnmount	1	否