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 ...
随机推荐
- 【linux磁盘分区--格式化】fdisk,parted,mkfs.ext3
磁盘分区完成后,一般就需要对分区进行格式化 磁盘分区命令主要有两个: fdisk :最大支持不超过2T分区: parted :支持GPT,适用于大容量分区: 分区指令的选择: 在RHEL系统上,用fd ...
- js常用方法收集
JS获取地址栏制定参数值: //获取URL参数的值 function getUrlParam(name){ var reg = new RegExp("(^|&)"+ na ...
- (WPF) MVVM: DataGrid Binding
Binding到DataGrid的时候,需要用到ObservableCollection. public ObservableCollection<Customer> Customers ...
- BEvent_标准BusinessEvent用以监控供应商的修改(案例)
2014-06-01 Created By BaoXinjian
- Shell Python 日期和时间戳的互相转换
一.初衷: 很多时候,时间的存储都是时间戳格式,如果需要展示就要转化成标准格式日期.也许会需要date和timestamp互转. 二.方法: 1.Shell下对date和timestamp的互转,是通 ...
- gridview--基本的gridview
GridView 元素距离设定 因为该设定比较简单 防止以后忘记 所以贴 供自己查阅 1. 布局:main.xml <?xml version="1.0" encoding= ...
- 编译器错误消息: CS0234: 命名空间“Purple”中不存在类型或命名空间名称“Model”(是否缺少程序集引用?)
编译错误 “/storeimg”应用程序中的服务器错误. 编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息: CS023 ...
- ylbtech-LanguageSamples-Threading(线程处理)
ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Threading(线程处理) 1.A,示例(Sample) 返回顶部 “线程处理”示例 ...
- JAVA 匿名对象
/* 匿名对象: 没有名字的对象 匿名对象的使用方式之一: 当对对象方法只调用一次时,我们可以用匿名对象来完成,比较简化. 匿名对象的使用方式之二: 匿名对象可以被当做实参传递 */ class Ca ...
- Python标准库04 文件管理 (部分os包,shutil包)
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在操作系统下,用户可以通过操作系统的命令来管理文件,参考linux文件管理相关命令 ...