React生命周期和虚拟DOM

时间:2023-01-14 16:37:49

一.虚拟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的更多相关文章

  1. React 生命周期

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  2. React生命周期简单详细理解

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  3. vue生命周期和react生命周期对比

    一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...

  4. 前端005&sol;React生命周期

    ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生 ...

  5. 【React学习笔记】React生命周期梳理(16&period;X前后两种)

    React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...

  6. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

  7. 22&period;1 、react生命周期&lpar;一&rpar;

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  8. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  9. react生命周期方法有哪些?

    react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...

随机推荐

  1. APP测试流程(个人整理)

  2. &lbrack;LintCode&rsqb; Roman to Integer 罗马数字转化成整数

    Given a roman numeral, convert it to an integer. The answer is guaranteed to be within the range fro ...

  3. asp&period;net C&num; 未能加载文件或程序集或它的某一个依赖项。需要强名称程序集。的解决办法

    asp.net C# 未能加载文件或程序集或它的某一个依赖项.需要强名称程序集.的解决办法 出现这个错误是原因:是有签名的DLL引用了无签名的DLL 如上图所示,就是因为引用Entity.MVCEnt ...

  4. &lbrack;杂谈&rsqb;交通工具orca card

    How and Where to Use the ORCA Card The Microsoft ORCA card provides unlimited rides on all buses, tr ...

  5. GIT权威手册及常用命令用法

    http://git-scm.com/book/zh Git Stash用法 http://www.cppblog.com/deercoder/archive/2011/11/13/160007.ht ...

  6. 双积分式&lpar;A&sol;D&rpar;转换器电路结构及工作原理

    1.转换方式 V-T型间接转换ADC. 2.  电路结构 图1是这种转换器的原理电路,它由积分器(由集成运放A组成).过零比较器(C).时钟脉冲控制门(G)和计数器(ff0-ffn)等几部分组成 图1 ...

  7. C&colon;&bsol;WINDOWS&bsol;system32&bsol;config&bsol;systemprofile&bsol;Desktop引用了一个不可用的位置

    使用迅雷下载压缩文件到桌面时,下载完毕后,如果直接点击"打开文件",则迅雷会报错: C:\WINDOWS\system32\config\systemprofile\Desktop ...

  8. app 选项卡代码

    <div id="segmented" class="mui-segmented-control"> <a class="mui-c ...

  9. RandomAccessFile类进行文件加密

    文件加密/解密示例. package io; import java.io.*; public class encrypt { private File file; //存储文件对象信息 byte[] ...

  10. kubernetes 集群安装etcd集群,带证书

    install etcd 准备证书 https://www.kubernetes.org.cn/3096.html 在master1需要安装CFSSL工具,这将会用来建立 TLS certificat ...