详解React组件生命周期中挂载、更新和卸载三个阶段

一、挂载阶段

这个阶段是指组件被创建，初始化执行，并且被挂载到DOM中，完成组件的第一次渲染。以下为它依次调用的生命周期方法：
（1）constructor （2）componentWillMount （3）render （4）componentDidMount

1、constructor
相信大家多少都了解构造方法，这个构造方法主要负责接收一个props参数、初始化组件的state以及绑定事件处理方法等工作。prpos是从父组件传入的属性对象，如果父组件中没有传入属性而组件自身定义了默认属性，那么这个props指向的就是组件自己的默认属性，并且必须在这个构造方法中首先调用super(props)才能保证props被传入组件中。

2、componentWillMount
这个方法是在组件被挂载到DOM前调用，且只会被调用一次。我个人理解这个方法在实际的项目中用到得很少，因为需要在该方法中执行的工作完全都可以提前到constructor中。
！！注意：在这个方法中调用this.setState不会引起组件的重新渲染哦。(个人理解，因为组件渲染的前提是将组件挂载到DOM节点，然而这个方法恰恰是在组件被执行挂载之前调用)

3、render
这个是定义组件的唯一并且必要的方法。在这个方法中，会根据组件的props和state返回一个React元素，用于描述组件的UI。
！！注意点：render并不负责组件的实际渲染工作，它只是返回一个UI的描述，真正渲染出页面是由DOM和React自身来负责。所以不能在render中调用this.setState。

4、componentDidMount
该方法在组件被挂载到DOM后调用，且只会被调用一次。调用这个方法的时候已经获取到DOM结构了，因此依赖于DOM节点的一系列操作都可以放到这个方法中。这个方法通常还会被用于向服务器请求数据，dispatch action等等。this.setState在该方法中被调用会引起组件的重新渲染（我猜应该会有人理解不了了，重新渲染之前组件肯定会被重新挂载到DOM，那不是会继续调用这个方法，陷入死循环吗？）。
注意：第一句话就是这个方法只会被调用一次！也就是说在这个组件没有被卸载之前都不能重复调用这个方法了。 咦？那我如果后续想继续更新这个组件怎么办呢？继续看下面的更新阶段！

二、更新阶段

额，，，不好意思，刚刚主管喊我写需求了。先太监，，后续会在我的下一篇博客更新。
嘤嘤嘤~

• 点赞
• 收藏
• 分享
• 文章举报