组件生命周期

挂载阶段的组件生命周期

我们把 React.js 将组件渲染,并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。

React.js 控制组件在页面上挂载和删除过程里面几个方法:

这是因为,当时钟隐藏的时候,我们并没有清除定时器。时钟隐藏的时候,定时器的回调函数还在不停地尝试 setState,由于 setState 只能在已经挂载或者正在挂载的组件上调用,所以 React.js 开始疯狂报错。

多次的隐藏和显示会让 React.js 重新构造和销毁 Clock 组件,每次构造都会重新构建一个定时器。而销毁组件的时候没有清除定时器,所以你看到报错会越来越多。而且因为 JavaScript 的闭包特性,这样会导致严重的内存泄漏。

这时候 componentWillUnmount 就可以派上用场了,它的作用就是在组件销毁的时候,做这种清场的工作。例如清除该组件的定时器和其他的数据清理工作。我们给 Clock 添加 componentWillUnmount,在组件销毁的时候清除该组件的定时器。

总结

我们一般会把组件的 state 的初始化工作放在 constructor 里面去做;在 componentWillMount 进行组件的启动工作,例如 Ajax 数据拉取、定时器的启动;组件从页面上销毁的时候,有时候需要一些数据的清理,例如定时器的清理,就会放在 componentWillUnmount 里面去做。

更新阶段的组件生命周期

组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。

除了挂载阶段,还有一种“更新阶段”。说白了就是 setState 导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程,这是一个组件的变化过程。而 React.js 也提供了一系列的生命周期函数可以让我们在这个组件更新的过程执行一些操作。

更新阶段的组件生命周期:

  1. shouldComponentUpdate(nextProps, nextState):你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。
  2. componentWillReceiveProps(nextProps):组件从父组件接收到新的 props 之前调用。
  3. componentWillUpdate():组件开始重新渲染之前调用。
  4. componentDidUpdate():组件重新渲染并且把改变更到真实的 DOM 以后调用。

React.js 组件是有更新阶段的,并且有这么几个更新阶段的生命周期即可。

组件加载: componentWillMount

componentWillMount会在组件render之前执行,并且永远都只执行一次。

由于这个方法始终只执行一次,所以如果在这里定义了setState方法之后,页面永远都只会在加载前更新一次。

组件加载: componentDidMount

这个方法会在组件加载完毕之后立即执行。在这个时候之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。

如果你想和其他JavaScript框架一起使用,可以在这个方法中执行setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

组件更新: componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在组件接收到一个新的prop时被执行。这个方法在初始化render时不会被调用。

旧的props可以通过this.props来获取。在这个函数内调用this.setState()方法不会增加一次新的render

组件更新: shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

返回一个布尔值。在组件接收到新的props或者state时被执行。在初始化时或者使用forceUpdate时不被执行。

如果shouldComponentUpdate返回false, render()则会在下一个state change之前被完全跳过。(另外componentWillUpdatecomponentDidUpdate也不会被执行)。

默认情况下shouldComponentUpdate会返回true

组件更新: componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

在组件接收到新的props或者state但还没有render时被执行。在初始化时不会被执行。

一般用在组件发生更新之前。

组件更新: componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在组件完成更新后立即执行。在初始化时不会被执行。一般会在组件完成更新后被使用。例如清除notification文字等操作。

组件卸载: componentWillUnmount

主要用来执行一些必要的清理任务。例如清除setTimeout等函数,或者任意的在componentDidMount创建的DOM元素。

参考文章:组件生命周期