/--- date: 2015-06-18 00:43:43 +0800 categories: 技术 ---/

记一次探索react组件生命周期实验

想着用nprogress实现进度条的效果,正好用着react,于是就摸索了一下react组件的生命周期,做了个nprogress的demo页面,下面的内容翻译自react官方文档

组件的生命周期

组件的生命周期分为三个阶段。

在每个阶段,react均提供了一些函数供我们对组件进行自定义的操作。

Mounting阶段

react-component-lifecycle-mounting

  1. getInitialState(): 在组件被载入DOM前触发。根据需要,在这里我们可以提供一些标识组件状态的信息。
  2. componentWillMount(): 在组件被载入DOM时的前一刻触发。
  3. componentDidMount(): 在组件被载入DOM后立即触发。

Updating阶段

react-component-lifecycle-updating

  1. componentWillReceiveProps(object nextProps): 被载入到DOM中的组件接收到新的props(属性)时触发。
  2. shouldComponentUpdate(object nextProps, object nextState): 当组件觉得需要更新DOM时触发。注意当该函数返回false时,会跳过本次更新动作。故该函数默认总是返回true。
  3. componentWillUpdate(object nextProps, object nextState): 在更新动作实际发生前立即触发。
  4. componentDidUpdate(object prevProps, object prevState): 更新动作完成后,立即触发。

Unmounting阶段

react-component-lifecycle-unmounting

  1. componentWillUnmount(): 在组件卸载并销毁前立即触发。

(完)