React组件的生命周期

October 15, 2018

1545 views

2035 words

组件挂载

我们把 React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载（这个定义请好好记住）。其实 React.js 内部对待每个组件都有这么一个过程，也就是初始化组件 -> 挂载到页面上的过程。所以你可以理解一个组件的方法调用是这么一个过程：

-> constructor()
-> render()
// 然后构造 DOM 元素插入页面

这当然是很好理解的。React.js 为了让我们能够更好的掌控组件的挂载过程。插入了更多的方法：

-> constructor()                 //一般用于组件state的初始化
-> componentWillMount()          //组件挂载前执行，进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动
-> render()                      //挂载组件，将构造的 DOM 元素插入页面
-> componentDidMount()           //挂载完成执行，如使用ref操作真实 DOM ，动画的启动

demo

class App extends Component {
  constructor () {
    super()
    console.log('construct')
  }

  componentWillMount () {
    console.log('component will mount')
  }

  componentDidMount () {
    console.log('component did mount')
  }

  render () {
    console.log('render')
    return (
      <div>
        <h1 className='title'>React挂载组件</h1>
      </div>
    )
  }
}

可以看到控制台输出：

construct
component will mount
render
component did mount

组件卸载

一个组件可以插入页面，当然也可以从页面中删除

React.js 也控制了这个组件的删除过程（包括使用null判断隐藏）。在组件删除之前 React.js 会调用组件定义的 componentWillUnmount()：

-> constructor()
-> componentWillMount()
-> render()
-> componentDidMount()

 ...
// 即将从页面中删除
-> componentWillUnmount()
// 从页面中删除

组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount() 里面去做。

更新组件

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

-> shouldComponentUpdate(nextProps, nextState)      //控制组件是否重新渲染。如果返回`false`组件就不会重新渲染
-> componentWillReceiveProps(nextProps)             //组件从父组件接收到新的`props`之前调用
-> componentWillUpdate()                            //组件开始重新渲染之前调用
-> componentDidUpdate()                             //组件重新渲染并且把更改变更到真实的 DOM 以后调用