一、生命周期

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

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

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

constructor：在执行组件初始化时执行，可以给组件初始化state，或者给点击事件bind绑定this; 智慧触发一次
render: 根据组件模板编译成虚拟DOM，此时页面还没有渲染
- 不要在render 内调用this.setState() ，会形成死循环
- render 由于会触发多次，制作数据渲染操作，比如解构props、state 。不要在这里面发送请求等和渲染无关的操作
componentDidMount ：组件已挂在完毕，此时已经可以看到页面了，虚拟DOM已经被转化为真实DOM了，可以在改函数操作DOM. 只执行一次
- 组件初始化请求，放在componentDidMount 构造函数中即可，虽然constructor 也可以发送请求，且执行实际比 componentDidMount 更早，但是react 对于初始化请求的发送，显然是等到组件挂载完毕之后才正式发送请求的异步任务的。因此初始化请求不会放在constructor

三、组件更新阶段

render：三种情况会触发render函数的调用
- 父组件传递了新的prop
- 子组件调用了setState () ,修改了私有数据
- forceUpdate（）强制渲染
componentDidUpdate: 新DOM 更新完毕，此时可以获取最新的DOM结构。

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

四、组件销毁阶段

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

react 生命周期--常用的构造函数相关推荐

react生命周期详细介绍
目录挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...
浅谈 React 生命周期
浅谈 React 生命周期浅谈 React 生命周期旧版的生命周期新版的生命周期详解各个生命周期函数 constructor getDerivedStateFromProps render c ...
React 生命周期钩子函数
React15 挂载过程 // 完成了React数据的初始化. props.state constructor() // 组件已经完成初始化数据,但是还未渲染DOM时执行的逻辑 componentWi ...
react生命周期（自己的方式理解）
react生命周期(自己的方式理解) react的生命周期函数有:挂载,渲染/更新,卸载首先要知道react生命周期最初始的要有哪些?最后生命中出现的又有哪些?我本人喜欢把react比作是一个人的一 ...
你不可不知道的React生命周期
点小蓝字加关注! 作者:kim 来源:原创写在前面咱今天聊的话题是React生命周期,灵感来自于最近在网上发现一篇关于react生命周期的文章,里面记录的知识点竟然与小编所get到的有出入.作为一 ...
ES6中的React生命周期详解
太长时间没写react了,有点生.重新捡起来练练手. import React,{ Component } from 'react';class Demo extends Component {con ...
vue生命周期和react生命周期对比。
生命周期指的是组件从初始化开始到结束的过程或者是生命周期是描述组件从开始到结束的过程,每个组件都具有生命周期,都对组件通过生命周期给予的钩子函数进行管理. 钩子函数指的是系统某些状态和参数发生改 ...
React、react生命周期、react生命周期运行过程、shouldComponentUpdate的用法
React.react生命周期.react生命周期运行过程 1.创建阶段 constructor(){super()console.log('执行构造函数')this.state={num:1}}UN ...
React生命周期讲解
React生命周期图解先上图其实总结就是进入当前页面,,然后渲染页面,加载数据,渲染demo,数据更新,组件卸载 constructor /* * constructor 其实是Es6 里面带的 ...

react 生命周期--常用的构造函数

一、生命周期

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

三、组件更新阶段

四、组件销毁阶段

react 生命周期--常用的构造函数相关推荐

最新文章

热门文章