说一说我了解的react生命周期函数
我了解的几个阶段
- Mounting 挂载
- Updating 更新
- Unmounting 卸载
我说几个我常用的钩子函数
1.挂载阶段Mounting
1)constructor():函数构造器
执行次数:1
作用:初始化
2)componentDidmount()
执行次数:1
作用:Dom挂载完成获取节点,通常在这里发起数据请求
3)render()
react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。
4)shouldComponentUpdate(nextProps, nextState):判断组件是否更新的钩子函数
触发条件:组件挂载之后,每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true,需要重新render。
2.更新阶段Updating
1)componentDidUpdate(prevProps, prevState):组件完成更新时执行的钩子函数
执行次数:多次
作用:除了首次render之后调用componentDidMount,其它render结束之后都是调用componentDidUpdate。
3.卸载阶段Unmounting
1)componentWillUnmount():组件将要卸载是执行的钩子函数
执行次数:1
触发条件:组件将要被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除
知道的并不是很多,所有就写了这些
说一说我了解的react生命周期函数的更多相关文章
- React生命周期函数详解
React生命周期函数 生命周期函数是指在某一个周期自动执行的函数. React中的生命周期执行过程 以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行 ...
- 十二、React 生命周期函数
React生命周期函数: [官方文档]:https://reactjs.org/docs/react-component.html [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...
- react生命周期函数使用箭头函数,导致mobx-react问题
最近新人加入了项目,遇到了一个很奇怪的问题.mobx observable 属性,onChange的时候就是页面不会刷新. 试来试去,就是不知道什么原因,后来其他同事查到是因为componentWil ...
- 2.React 生命周期函数
什么是生命周期函数:在某一时刻组件会自动调用执行的函数. import React,{ Component,Fragment } from 'react' class Note extends Com ...
- react生命周期函数的应用-----1性能优化 2发ajax请求
知识点1:每次render其实就会将jax的模板生成一个虚拟dom,跟上一个虚拟dom进行比对,通过diff算法找出不同,再更新到真实dom上去. 1性能优化 每次父组件render一次(除了第一次初 ...
- react 生命周期函数介绍
constructor():构造函数 执行:组件加载钱最先调用一次,仅调用一次. 作用:定义状态机变量. 注意:第一个语句必须为super(), 否则会报错:'this' is not allowed ...
- react生命周期函数
如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组 ...
- react 生命周期函数的一些心得体会
一.理论 组件本质上是状态机,输入确定,输出一定确定 生命周期的三个阶段,三者时间是不固定的,只是在逻辑上的分类: 二.初始化阶段: getDefaultProps:获取实例的默认属性(即使没有生成实 ...
- react 生命周期函数
(1)初始化阶段:getDefaultProps:获取实例的默认属性static propTypes 设置属性的类型componentWillMount:组件即将首次被装载.渲染到页面上render: ...
随机推荐
- 阿里云安装mysql,初始化密码修改
阿里云服务器,centos7, rpm包安装MySQL,初始化了个奇葩密码 登陆不上, 修改配置文件/etc/my.cnf,在[mysqld]下面添加一行代码:skip-grant-tables se ...
- mysql 命令行导入导出.sql文件
window下 1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldump -u dbuser -p dbname > dbname.sql 2 ...
- HTML中用自定义字体实现小图标icon(不是原作, 只是一个研究笔记)
最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!! 但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文 ...
- Scala match 变量
昨天写 Scala 的时候,使用 match(相当于 switch)时,运行结果很奇怪. var i: Int = 0 while (i < items.length) { i % width ...
- Django(七)模型:字段属性、字段选项(参数)
一.模型类属性命名限制 参考:https://docs.djangoproject.com/zh-hans/3.0/topics/db/models/ 1)不能是python的保留关键字. 2)不允许 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-download
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-question-sign
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- Java 日期与时间
章节 Java 基础 Java 简介 Java 环境搭建 Java 基本语法 Java 注释 Java 变量 Java 数据类型 Java 字符串 Java 类型转换 Java 运算符 Java 字符 ...
- 《ES6标准入门》(阮一峰)--6.正则的扩展
1.RegExp 构造函数 在 ES5 中,RegExp构造函数的参数有两种情况. 第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag). var regex = new Re ...
- UVA - 10891 Game of Sum (区间dp)
题意:AB两人分别拿一列n个数字,只能从左端或右端拿,不能同时从两端拿,可拿一个或多个,问在两人尽可能多拿的情况下,A最多比B多拿多少. 分析: 1.枚举先手拿的分界线,要么从左端拿,要么从右端拿,比 ...