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 ...
随机推荐
- Dell R410 broadcom网卡驱动更新失败
问题描述: 最近遇到一个Dell R410 broadcom网卡驱动更新失败的问题.从官网上下载的驱动在安装的过程中都会自己回滚回来,很是困惑. 尝试解决: Dell官网现在提供的驱动一般最少有两种格 ...
- 328. Odd Even Linked List
Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...
- input file 上传文件
面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...
- git的使用(3) 多分支情况下的pull
当你存在多个分支的时候,你需要pull下来分支上面的内容,你需要指定分支进行同步命令: git pull origin branch (branch 是你的分支的名字)
- Note++ 的快捷
Notepad++绝对是windows下进行程序编辑的神器之一,要更快速的使用以媲美VIM,必须灵活掌握它的快捷键,下面对notepad++默认的快捷键做个整理(其中有颜色的为常用招数): Ctrl+ ...
- Software Engineer
1, 软件工程师 软件工程师英文是Software Engineer,是从事软件职业的人员的一种职业能力的认证,通过它说明具备了工程师的资格.软件工程师是从事软件开发相关工作的人员的统称. 它是一个广 ...
- viewpage广告条的制作
package com.itheima27.viewpagerdemo; import java.util.ArrayList; import java.util.List; import andro ...
- Web Uploader文件上传&&使用webupload有感(黄色部分)
引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" ...
- GCD信号量并发控制
/** * 当我们在处理一系列线程的时候,当数量达到一定量,在以前我们可能会选择使用NSOperationQueue来处理并发控制,但如何在GCD中快速的控制并发呢?答案就是dispatch_sem ...
- label 行距
NSMutableAttributedString * attributedString1 = [[NSMutableAttributedString alloc] initWithString:te ...