生命周期

整理生命周期的几个函数的触发时间,作用以及使用情景

  • 调用时间(触发时间)
  • 作用
  • 经常用来进行的操作
  • 执行完成后的结果

组件的生命周期

一个组件的生命周期主要分为三种状态,对于初学者,可以试着将组件的生命周期想象为一场舞台剧。

  • 安装/Mounting(登台)

    这个时期主要是组件的初始化,直到组件被插入到真实的DOM结构中去。(登场以及登场前的准备)

  • 更新/Updating(演出)

    当组件被插入到真实的DOM结构后,根据stateprops的改变,组件将重新进行render。(随着剧情推动,舞台呈现的场景不断的变换)

  • 卸载/Unmounting(谢幕)

    组件从真实DOM中移除

Mounting

componentWillMount()

  • 触发时间:在组件

componentWillMount()在安装发生之前立即被调用。它在render()之前调用,因此在此方法中的设置状态不会触发重新呈现。避免在此方法中引入任何副作用或订阅。 这是在服务器渲染上调用的唯一的生命周期钩子。一般来说,我们建议使用constructor()。

这个方法在组件已经即将创建但是还没有创建的时候调用,在这里可以用setState修改state。但是react建议是在组件mouted以后调用setState函数,否则容易报警告。这点在介绍state的时候在详细分析。

componentDidMount()

Updating

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

componentDidUpdate()

Unmounting

componentWillUnmount()