关于React组件的生命周期介绍

一个React组件被渲染的过程有三个阶段。这个过程就叫做组件的生命周期。每个React组件都会经历这个过程。为了使这个过程可操控,React提供了一些方法,在组件生命周期过程中,通过这些方法我们可以得到某个阶段发生的通知。这些方法就叫作组件的生命周期方法,它们按特定顺序被调用。

所有React组件的生命周期方法可以分为下面三个阶段。

  • 挂载(Mounting):这个阶段发生在组件被插入DOM时。
  • 更新(Updating):这个阶段发生在组件被重新渲染成虚拟DOM并决定实际DOM是否需要更新时。
  • 卸载(Unmounting):这个阶段发生在组件从DOM中被删除时。

挂载

下面的方法按序执行。

getDefaultProps()

此方法可以给组件设置默认的属性。在render渲染的组件中可以通过this.props.someprop调用。

getDefaultProps: function() {
  console.log('getDefaultProps');
  return {
    text : 'hello'
  } 
},
render: function () {
  return (
    <h2>{this.props.text}</h2>
  );
}

getInitialState()

getInitialState()方法是第一个被调用的,它会在React将组件插入DOM之前被调用。如果想让组件有一个状态(state),那么可以使用这个方法返回初始的组件state。

getInitialState: function() {
  console.log('getInitialState');
  return {
    state1: 'state1',
    state2: 'state2'
  }
}

componentWillMount()

componentWillMount()方法是第二个被调用的,它会在React将组件即将插入DOM时被调用。

componentWillMount: function() {
  console.log('componentWillMount');
  this.setState({
    state1: 'state11',
    state1: 'state22'
  })
  window.a = 1;
}

调用this.setState()方法会触发组件的render()方法,所以看起来像是在组件挂载阶段render()方法被调用了两次。然而在这里,React知道还没有开始渲染,所以它将仅仅调用render()方法一次。

render()

最基本的,React组件需要一个render()方法,因此它至少会返回null或者false。render()负责告诉React怎样渲染这个React组件。它可以返回null,表示不渲染任何内容。它也可以返回一个组件。
使用React API有两种方法可以将数据传递给render()函数:

  • this.props
  • this.state

this.props存储的是从父级传过来的只读数据。它属于父级,并且不能被它的子元素改变。这个数据应当认为是不可改变的。
this.state存储的数据是组件私有的。它能被组件修改。当state更新后组件会自动重新渲染(一般)。

componentDidMount()

componentDidMount()方法是第三个被调用的。它在React将组件插入到DOM之后立即被调用。更新后的DOM现在可以被访问,这意味着这个方法是初始化其他需要访问这些DOM的JavaScript库的最佳地方。

componentDidMount: function() {
  console.log('componentDidMount');
  // 获取dom节点
  var componentDOMNode = ReactDOM.findDOMNode(this);
}

更新

在此阶段,React组件已经被插入到DOM中。这个DOM代表组件的当前状态,并且当状态改变,React需要评估一个新的状态将如何改变先前渲染的DOM。

React组件有5个属于组件更新阶段的声明周期方法:

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate

render()方法已经介绍过。

componentWillReceiveProps

这个方法在组件声明周期更新阶段被第一个调用,具体来说,就是当组件从它的父组件接收到新属性时被调用。

此方法为我们提供了一个机会,让我们可以使用this.props对象和nextProps对象来比较当前组件和下一个组件的属性。根据比较结果,可以选择使用this.setState()函数来更新组件的state,在这种场景下将不会触发额外的渲染。React做了内部优化,会把状态更新操作放在一起批量执行。

componentWillReceiveProps: function(nextProps) {
  console.log('componentWillReceiveProps');

  var current = this.props.parentComponentProp;
  var next = nextProps.parentComponentProps;

  if( Object.is(current, next) ) {
    this.setState({
      state1: 'state111',
      state2: 'state222'
    }) 
  }
}

shouldComponentUpdate()

通过这个方法,我们可以决定组件的下一个状态是否触发组件的重新渲染。这个方法返回一个布尔值,默认值是true。但是也可以使它返回false,此时下面的组件方法都不会被调用。

  • componentWillUpdate()
  • render()
  • componentDidUpdate()

如果跳过对组件的render()方法的调用,就会阻止对该组件的重新渲染,这将提高应用程序的性能,因为没有额外的DOM改变。
shouldComponentUpdate()方法在组件声明周期的更新阶段被第二个调用。

shouldComponentUpdate: function (nextProps, nextState) {
  console.log('shouldComponentUpdate');

  return (!!nextProps.parentComponentProps);
}

componentWillUpdate()

componentWillUpdate()方法在React即将更新DOM之前被调用。它得到一下两个参数:

  • nextProps:下一个属性对象
  • nextState:下一个状态对象

可以使用这些参数来准备DOM更新。不过,你不能在componentWillUpdate()方法中使用this.setState()。如果你想更新组件的状态以响应其属性修改,那么请在componentWillReceiveProps()方法中做,React会在属性变化时调用它。

componentWillUpdate: function() {
  console.log('componentWillUpdate');
}

在调用componentWillUpdate()方法之后,React调用render()方法来执行DOM更新。然后componentDidUpdate()方法被调用。

componentDidUpdate()

componentDidUpdate()方法在React更新DOM之后会被立即调用。它得到如下两个参数:

  • prevProps:上一个属性对象
  • prevState:上一个状态对象

我们将使用这个方法来操作更新后的DOM或者执行渲染后的操作。在componentDidUpdate()被调用之后,更新阶段结束。
当组件的状态更新或者父组件传来一个新的属性时,一个新阶段又开始了。或者,调用forceUpdate()方法也会触发一个新的更新阶段,只是在触发更新的组件上会跳过shouldComponentUpdate()方法。不过,在所有子组件的更新阶段,shouldComponentUpdate()仍会像往常一样被调用。实践中尽量不要使用forceUpdate()方法,这样能提高程序的可维护性。

卸载

在这个阶段React仅提供一个方法,那就是componentWillUnmount()。它在React即将从DOM中删除并销毁组件之前调用。对于清理组件在安装或更新阶段创建的所以数据,这个方法是很有用的。

componentWillUnMount()

componentWillUnmount: function() {
  console.log('componentWillUnmount');
  // 清理数据
  delete window.a;
}

在整合React组件和其他JavaScript API时,可以将componentDidMount()和componentWillUnmount()方法想象成一个两部机制:

  • 在componentDidMount()方法中初始化它们。
  • 在componentWillUnmount()方法中结束它们。

这种方式可以使需要操作DOM的第三方JavaScript库与React渲染的DOM保持同步。

参考

React精髓(React.js Essentials)

欢迎分享本文,转载请保留出处:前端ABC » 关于React组件的生命周期介绍

赞 (2)
分享到:更多 ()

发表评论 0