React生命周期和虚拟DOM
一.虚拟DOM
1.React并不直接操作DOM,React中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器
2.React实现了一整套事件系统,所有的事件对象符合W3C规范,并且事件冒泡跨浏览器支持。你能够使用HTML5事件,但是在老浏览器并不支持。
二.Refs and findDOMNode()
1.与浏览器交互,你将会需要一个DOM节点的引用,您能够将ref属性添加到任何一个元素,通过这种方式,你能够引用组件支持的实例,如果你要调用组件上的一个函数或者访问
底层DOM节点,那是非常有用的。在这篇文章中学习更多ref相关知识
三.生命周期
React中,组件的生命周期有三个阶段,分别为:初始阶段,更新阶段,销毁阶段
初始阶段:组件被插入DOM中
更新阶段:如果DOM应该被更新,组件重新渲染
销毁阶段:组件从DOM中移除
在这三个阶段,react都提供了一些钩子函数。总的来说,是Will方法和Did方法。Will方法在事情发生之前执行,Did方法在事情发生之后执行
1.初始化阶段
(1)getInitialState()。这个函数在组件被装载前调用,对于需要设置状态的组件,应该执行它,并且返回组件的初始状态
(2)componentWillMount()。这个函数在组件即将被装载时调用,可以在这个函数中修改组件的状态
(3)componentDidMount()。这个函数在组件被装载后立即调用。调用这个方法的时候,组件已经被渲染在页面中了,所有在这个函数中可以修改DOM节点。
2.更新阶段
(1)componentWillReceiveProps(object nextProps)。当一个已经装载的组件接受到新的属性时调用,这个函数可以接受一个对象类型的参数,这个参数表示接受到的新属性,可以
修改这个新的属性
(2)shouldComponentUpdate(object nextProps, object nextState)。这个方法返回一个布尔值,在这个函数中,开发者可以决定DOM是否更新,如果返回false,表示阻止更新,
这个阶段的后续的钩子函数也不会被调用
(3)componentWillUpdate(object nextProps, object nextState)。这个方法在更新发生前立即调用,这个函数中不能修改组件的状态
(4)componentDidUpdate(object prevProps, object prevState)。这个方法在更新发生后立即调用。它接受两个对象类型的参数,这两个参数分别表示更新前的属性和更新前的
状态
3.销毁阶段
componentWillUnmount()。组件被卸载前调用。组件的清理操作(如:清除定时器,事件监听等)应该子啊这里进行
React生命周期和虚拟DOM的更多相关文章
- React 生命周期
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- React生命周期简单详细理解
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- vue生命周期和react生命周期对比
一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...
- 前端005/React生命周期
ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生 ...
- 【React学习笔记】React生命周期梳理(16.X前后两种)
React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...
- React生命周期详解
React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分: 实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...
- 22.1 、react生命周期(一)
在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...
- React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
- react生命周期方法有哪些?
react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...
随机推荐
- SPOJ #440. The Turtle´s Shortest Path
Coding a Dijkstra is not hard. %70 of my time spent on tackling TLE, as my last post. Dijkstra works ...
- Windows2012 cannot access netapp CIFS share
NAS1> options cifs.smb2.signing.requiredcifs.smb2.signing.required off NAS1> options cifs.smb2 ...
- idea系列新版注册模式
http://idea.qinxi1992.cn/ 楼上被列入黑名单,用 http://114.215.133.70:41017/
- Oracle Erp常用网站
2014-01-01 Created By BaoXinjian
- linux命令(10)使用kill杀死含有指定关键字的进程
命令:ps -ef|grep keyword|grep -v grep|cut -c 9-15|xargs kill -9 批量杀死包含关键字“keyword”的进程. "ps -ef&qu ...
- [实变函数]2.1 度量空间 (metric space), $n$ 维 Euclidean 空间
1 回忆: $$\bex \lim_{n\to\infty}a_n=a\lra \forall\ \ve>0,\ \exists\ N,\ \forall\ n\geq N,\mbo ...
- mysql函数计算地表两点间距离
DELIMITER $$ CREATE FUNCTION `test`.`getDistance`(LatBegin FLOAT(10,4), LngBegin FLOAT(10,4), LatEnd ...
- 专注于提高“人肉测试”效率,Bugtags已完成600万元天使轮融资
导语:近日,专注于移动测试的缺陷发现及管理工具“Bugtags”创始人张磊独家透露,Bugtags已完成600万元天使轮投资,投资方为高捷资本. 近日,专注于移动测试的缺陷发现及管理工具“Bugtag ...
- java获取数据库的列名,类型等信息
当你使用和学习JDK的时候,可以查看并学习它所提供给你的两个ResultSetMetaData 和DataBaseMetaData类的源码并很好的了解它们的实现原理和思路,JDBC中提供有两种源数据, ...
- C++学习50 对字符串流的读写
文件流是以外存文件为输入输出对象的数据流,字符串流不是以外存文件为输入输出的对象,而以内存中用户定义的字符数组(字符串)为输入输出的对象,即将数据输出到内存中的字符数组,或者从字符数组(字符串)将数据 ...