一.虚拟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/React生命周期

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

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

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

  6. React生命周期详解

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

  7. 22.1 、react生命周期(一)

    在每个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. 【linux磁盘分区--格式化】fdisk,parted,mkfs.ext3

    磁盘分区完成后,一般就需要对分区进行格式化 磁盘分区命令主要有两个: fdisk :最大支持不超过2T分区: parted :支持GPT,适用于大容量分区: 分区指令的选择: 在RHEL系统上,用fd ...

  2. js常用方法收集

    JS获取地址栏制定参数值: //获取URL参数的值 function getUrlParam(name){ var reg = new RegExp("(^|&)"+ na ...

  3. (WPF) MVVM: DataGrid Binding

    Binding到DataGrid的时候,需要用到ObservableCollection. public ObservableCollection<Customer> Customers ...

  4. BEvent_标准BusinessEvent用以监控供应商的修改(案例)

    2014-06-01 Created By BaoXinjian

  5. Shell Python 日期和时间戳的互相转换

    一.初衷: 很多时候,时间的存储都是时间戳格式,如果需要展示就要转化成标准格式日期.也许会需要date和timestamp互转. 二.方法: 1.Shell下对date和timestamp的互转,是通 ...

  6. gridview--基本的gridview

    GridView 元素距离设定 因为该设定比较简单 防止以后忘记 所以贴 供自己查阅 1. 布局:main.xml <?xml version="1.0" encoding= ...

  7. 编译器错误消息: CS0234: 命名空间“Purple”中不存在类型或命名空间名称“Model”(是否缺少程序集引用?)

    编译错误 “/storeimg”应用程序中的服务器错误. 编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息: CS023 ...

  8. ylbtech-LanguageSamples-Threading(线程处理)

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Threading(线程处理) 1.A,示例(Sample) 返回顶部 “线程处理”示例 ...

  9. JAVA 匿名对象

    /* 匿名对象: 没有名字的对象 匿名对象的使用方式之一: 当对对象方法只调用一次时,我们可以用匿名对象来完成,比较简化. 匿名对象的使用方式之二: 匿名对象可以被当做实参传递 */ class Ca ...

  10. Python标准库04 文件管理 (部分os包,shutil包)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在操作系统下,用户可以通过操作系统的命令来管理文件,参考linux文件管理相关命令 ...