一.虚拟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. 【initrd】向虚拟文件系统initrd.img中添加驱动

    虚拟文件系统:initrd-2.6.18-194.el5.img 希望添加网卡或SCSI等驱动 步骤: 解压initrd-2.6.18-194.el5.img: 添加*.ko文件,并修改init可执行 ...

  2. Linux下的NTP

    一.电脑时间的误差众 所周知,电脑主机的时间是根据电脑晶振以固定频率振荡,从而产生的.由于晶振的不同,会导致电脑时间与UTC时间 (全球标准时间:全球标准时间指的是由世界时间标准设定的时间.原先也被称 ...

  3. android学习笔记46——File存储

    File存储--IO操作文件 openFileOutput.openFileInput Context提供了如下两个方法来打开本应用程序的数据文件夹里面的文件IO流. 1.FileInputStrea ...

  4. CSS3字体图标

    网址:http://icomoon.io/http://iconfont.cn/  阿里巴巴字体库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  5. Redis 内存使用优化与存储

    Redis 常用数据类型 Redis 最为常用的数据类型主要有以下五种: • String • Hash • List • Set • Sorted set 在具体描述这几种数据类型之前,我们先通过一 ...

  6. POJ 1155 TELE 背包型树形DP 经典题

    由电视台,中转站,和用户的电视组成的体系刚好是一棵树 n个节点,编号分别为1~n,1是电视台中心,2~n-m是中转站,n-m+1~n是用户,1为root 现在节点1准备转播一场比赛,已知从一个节点传送 ...

  7. 用socket操作redis

    代码: $cmd = "*3\r\n$3\r\nSET\r\n$3\r\nfoo\r\n$3\r\nbar\r\n"; // set foo bar $socket = socke ...

  8. Java 内存泄露

    一.Java内存回收机制 不论哪种语言的内存分配方式,都需要返回所分配内存的真实地址,也就是返回一个指针到内存块的首地址.Java中对象是采用new或者反射的方法创建的,这些对象的创建都是在堆(Hea ...

  9. php新浪微博登录接口用法实例

    本文实例讲述了php新浪微博登录接口用法.分享给大家供大家参考.具体分析如下: 在做微博登陆之前是需要申请到APP KEY 和App Secret,这个的申请方式请去 open.weibo.com 申 ...

  10. repo安装

    repo是使用python开发的一个用于多版本管理的工具,可以和git协作,简化git的多版本管理. repo安装: 1.新建~/bin,并将此目录包含在path变量中(如果已存在,且已在path变量 ...