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 ...
随机推荐
- Python控制流语句(if,while,for)
if.py number=23 guess=int(input("enter an int:")) if guess==number: print ("congratul ...
- 黄聪:使用WORDPRESS自带AJAX方法
例如给网站每页logo后面的一句名言,点击“换一条”就会ajax动态加载一条,使用了wordpress的自带ajax方法.下面介绍如何使用wordpress自带ajax方法: 1.在header.ph ...
- 黄聪:wordpress中remove_action、add_action、 do_action()的hook钩子都有哪些
原文地址:http://codex.wordpress.org/Plugin_API/Action_Reference muplugins_loaded After must-use plugins ...
- 转码:unescape("%u7B80%u4F53%u4E2D%u6587")--->escape("简体中文")
unescape("%u7B80%u4F53%u4E2D%u6587")"简体中文"escape("简体中文") "%u7B80% ...
- PLSQL_闪回删除FlashBack Delete表误删除如何进行恢复(案例)
2014-07-02 Created By BaoXinjian
- [物理学与PDEs]第1章习题参考解答
[物理学与PDEs]第1章习题1 无限长直线的电场强度与电势 [物理学与PDEs]第1章习题2 均匀带电球面的电场强度与电势 [物理学与PDEs]第1章习题3 常场强下电势的定解问题 [物理学与PDE ...
- java的枚举
package com.wzh.test.enum0; import org.junit.Test; public class demo1 { @Test public void testAb(){ ...
- [Flex] PopUpButton系列 —— 打开和关闭弹出菜单
<?xml version="1.0" encoding="utf-8"?><!--响应打开和关闭弹出菜单的例子 PopUpButtonOpe ...
- JDBC中的批量插入和乱码解决
字符集-乱码问题 用JDBC访问MySql数据库的时候,如果JDBC使用的字符集和MySql使用的字符集不一致,那么会导致乱码发生.解决办法当时是在使用JDBC的时候指定和数据库一样的字符集.我们可以 ...
- 服务器返回数组,data[0]得到的总是不对?如何处理?
我用asp.net MVC 写了服务器代码,返回数组,ajax怎么处理返回的数组内容? 您好,首先用eval将获得的ajax数据转化成json对象并赋值给一个变量. 比如: var obj=eval( ...