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 ...
随机推荐
- LintCode "Coins in a Line"
Recursion + Memorized Search(DP). And apparently, the code below can be iterative with only 3 vars - ...
- jQuery实现文字放大效果
实现效果:当鼠标移动到超链接的那一瞬间就出现提示. <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- AWS控制台改英文
https://console.amazonaws.cn 控制台首选项->语言->英文
- 战胜忧虑<5>——运用亚里士多德法则
运用亚里士多德法则 如果人们将忧虑的时间,用来寻找解决问题的答案,那忧虑就会在人们智慧的光芒下消失.那么当你面对忧虑时,应该怎么办理?答案是,我们一定要学会用下面三种分析问题的基本步骤来解决各种不同的 ...
- 黄聪:WordPress 多站点建站教程(六):使用WP_Query、switch_to_blog函数实现获取子站点分类中的文章
首先在你使用主题的funtions.php里面添加下代码: //根据时间显示最新的分类文章内容,每个站点显示一篇内容 //$blog_id 子站点ID //$catid 分类ID wp_reset_q ...
- 25 个超棒的 HTML5 & JavaScript 游戏引擎开发库
就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议.游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实.吸引人眼球.游戏引擎负责其余的事情.早期,游戏开发者通常从草图做起,花费高昂,且不容易 ...
- mac下Android开发环境搭建
之前一段时间在学习ios的开发,近一段时间想着也接触下Android开发,以来加深对移动端开发的理解.这里根据自己配置Android开发环境的过程,比较详细的来总结下自己的安装过程,希望对一些正准备配 ...
- 三种主流的WebService实现方案(REST/SOAP/XML-RPC)简述及比较
目前知道的三种主流的Web服务实现方案为:REST:表象化状态转变 (软件架构风格)SOAP:简单对象访问协议 XML-RPC:远程过程调用协议 简单介绍: REST:表征状态转移(Represent ...
- dede如何按自己写的ID进行排序
点评:dede排序问题:如何按自己写的ID排序,更改一下函数.即可轻松实现,下面有个具体的示例,大家可以参考下. 更改一下函数,实现排序方式根据自己写的ID排序就好了. 方法: 1.打开include ...
- [Flex] PopUpButton系列——CornerRadius的运用
<?xml version="1.0" encoding="utf-8"?><!--设置主按钮圆角半径 PopUpButtonCornerRa ...