一、生命周期

声明周期： 组件从创建到销毁的整个过程，一共有三个阶段： 创建阶段、运行阶段、销毁阶段。当组件被显示在页面中时，会被创建；组件从页面中消失了，会被销毁。

要在动态组件上理解组件的声明周期

二、组件的挂载阶段（初始渲染阶段）

1. constructor： 在执行组件初始化时执行，可以给组件初始化state，或者给点击事件bind绑定this; 智慧触发一次

2. render: 根据组件模板编译成虚拟DOM，此时页面还没有渲染

   • 不要在render 内调用this.setState() ，会形成死循环
   • render 由于会触发多次，制作数据渲染操作，比如 解构props、state 。不要在这里面发送请求等和渲染无关的操作

3. componentDidMount ： 组件已挂在完毕，此时已经可以看到页面了，虚拟DOM已经被转化为真实DOM了，可以在改函数操作DOM. 只执行一次

   • 组件初始化请求，放在componentDidMount 构造函数中即可，虽然constructor 也可以发送请求，且执行实际比 componentDidMount 更早，但是react 对于初始化请求的发送，显然是等到组件挂载完毕之后才正式发送请求的异步任务的。因此初始化请求不会放在constructor

三、组件更新阶段

1. render： 三种情况会触发render函数的调用

   • 父组件传递了新的prop
   • 子组件调用了setState () ,修改了私有数据
   • forceUpdate（） 强制渲染

2. componentDidUpdate: 新DOM 更新完毕 ，此时可以获取最新的DOM结构。

   以上两个钩子都是频繁执行的，只要props或state更新，他俩就会执行

四、组件销毁阶段

1. componentWillUnmount: 做一些清理组件内容的操作，比如： 定时器、添加的订阅、监听的事件

最后

以上就是动听店员为你收集整理的react 生命周期--常用的构造函数一、生命周期二、组件的挂载阶段（初始渲染阶段）三、组件更新阶段四、组件销毁阶段的全部内容，希望文章能够帮你解决react 生命周期--常用的构造函数一、生命周期二、组件的挂载阶段（初始渲染阶段）三、组件更新阶段四、组件销毁阶段所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。