React Native 组件的生命周期

简述

一个对象从开始生成到最后消亡所经历的状态是有一定的顺序的，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图（摘自网络）： React Native 生命周期.jpg

如图，可以把组件生命周期大致分为三个阶段：

• 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
• 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
• 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。

下面来详细讲解：

具体方法

之后会有代码示例，供参考

constructor(props, context)

构造函数，在创建组件的时候调用一次,且只调用一次。

---

void componentWillMount()

在组件挂载之前调用一次。
如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。这个函数在整个生命周期中只被调用一次。

---

void componentDidMount()

在组件第一次绘制之后，会调用 componentDidMount()，通知组件已经加载完成这个时候，子主键也都挂载好了，可以在这里使用refs。

---

void componentWillReceiveProps(nextProps)

props是父组件传递给子组件的。父组件发生render的时候子组件就会调用componentWillReceiveProps。
在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。

---

bool shouldComponentUpdate(nextProps, nextState)

组件挂载之后，每次调用setState后或接收到新的属性都会调用来判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。

---

void componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。

---

void componentDidUpdate()

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。
componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。

---

ReactElement render()

render是一个React组件所必不可少的核心函数（上面的其它函数都不是必须的）。记住，不要在render里面修改state。

---

void componentWillUnmount()

组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。

代码示例

export default class JHReactNative extends Component {
  constructor(props) {
    super(props);
    console.log('=============constructor===========');
    this.state = {};
  }

  // 准备加载组件，会调用
  componentWillMount() {
    console.log('=============componentWillMount===========');
  }

  //在组件第一次绘制之后会调用 ，通知组件已经加载完成
  componentDidMount() {
    //RN 框架是先调用子组件的 componentDidMount()，然后调用父组件的函数
    console.log('=============componentDidMount===========');
  }

  // 如果组件收到新的属性（props），就会调用
  componentWillReceiveProps(nextProps) {
    // 输入参数 nextProps 是即将被设置的属性，
    // 旧的属性还是可以通过 this.props 来获取。
    // 在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，
    // 这里调用更新状态是安全的，并不会触发额外的 render() 调用
    console.log('=============componentWillReceiveProps===========');
  }

  //当组件接收到新的属性和状态改变的话，都会触发调用
  shouldComponentUpdate(nextProps, nextState) {
    console.log('=============shouldComponentUpdate===========');
    return true; //如果 true 表示需要更新，false则不更新，直接进入等待状态
  }

  // 如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，调用
  // 这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中
  /*** 不能使用 this.setState 来修改状态***/
  componentWillUpdate(nextProps, nextState) {
    console.log('=============componentWillUpdate===========');
  }

  //渲染界面
  /*** 不能使用 this.setState 来修改状态***/
  render() {
    console.log('=============render===========');
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }

  // 调用了 render() 更新完成界面之后，会调用
  componentDidUpdate() {
    /*** 不能使用 this.setState 来修改状态***/
    console.log('=============componentDidUpdate===========');
  }

  // 当组件要被从界面上移除
  componentWillUnmount() {
    /*** 不能使用 this.setState 来修改状态***/
    console.log('=============componentWillUnmount===========');
  }
}

运行结果

运行结果.png