react 学习之路一 -- v15生命周期_react15生命周期-优快云博客

本文详细解析了React 15.0的生命周期，分为挂载、更新和卸载三个阶段，并介绍了各阶段的重要方法如componentWillMount、componentDidMount、shouldComponentUpdate等的作用及使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用了react一年，很多东西用的也是迷迷糊糊的，这里报了来自于拉钩教育的修言老师的课程来系统的学习一下react。下面算是我对于课程的笔记记录以及自我的一点理解吧。在此作出记录以及分享。如果想要一起加入学习之路的可以点击这里或者下面评论里说出来~ 共勉！

本文主要讲react15.0的生命周期。

我们通常把react的生命周期分为三个阶段来区分(本来就是三个阶段嘛）。

Mounting阶段：组件的挂载
Updating 阶段：组件的更新
Unmounting 阶段：组件的卸载

那接下来逐步讲一下三个阶段所执行的生命周期。

一、Mounting阶段：组件的挂载

  进入constructor
  componentWillMount方法执行
  render方法执行
  componentDidMount方法执行

  因为
  在componentWillMount的时候还是处于虚拟dom阶段
  在render之后才返回到页面上，
  在componentDidMount的时候可以去操作页面上的真实dom。
  所以
  在componentDidMount中写页一些 异步请求、面初始化等的一些方法会比较好。

二、Updating 阶段：组件的更新

 该阶段有两种不同的触发方式：
 
  1、父组件更新时触发
    componentWillReceiveProps方法执行
    shouldComponentUpdate方法执行
    componentWillUpdate方法执行
    render方法执行
    componentDidUpdate方法执行

  2、组件自我更新时触发
    shouldComponentUpdate方法执行
    componentWillUpdate方法执行
    render方法执行
    componentDidUpdate方法执行

  可以看到两种不同的触发的区别是多了个componentWillReceiveProps方法。
  当然，componentWillReceiveProps方法在父组件更新的时候就会触发。
  先来说说 componentWillUpdate 和 componentDidUpdate 这一对好基友。
  componentWillUpdate 
  会在 render 前被触发，它和 componentWillMount 类似，允许你在里面做一些不涉及真实 DOM 操作的准备工作；
  componentDidUpdate 
  则在组件更新完毕后被触发，和 componentDidMount 类似，这个生命周期也经常被用来处理 DOM 操作。
  此外，我们也常常将 componentDidUpdate 的执行作为子组件更新完毕的标志通知到父组件。


  这里需要重点提一下 shouldComponentUpdate 这个生命周期方法，它的调用形式如下所示：
  shouldComponentUpdate(nextProps, nextState)

三、Unmounting 阶段：组件的卸载

子组件的componentWillUnmount方法执行

  这个生命周期本身不难理解，我们重点说说怎么触发它。组件销毁的常见原因有以下两个。
  1.组件在父组件中被移除了：这种情况相对比较直观，对应的就是我们上图描述的这个过程。
  2.组件中设置了 key 属性，父组件在 render 的过程中，发现 key 值和上一次不一致，那么这个组件就会被干掉。

done.
上一篇：JSX
下一篇：生命周期v16