使用react开发网页的话,我们难免会下载两个包,一个是react,一个是react-dom,其中react是react的核心代码。react的核心思想是虚拟Dom,其实虚拟Dom改变没有那么复杂,简单而言就是一个js的对象来表达一个dom包含的东西,例如如下代码:

{
"tagName": "div",
"attrs": {
"styles": {
"fontSize": "20px"
}
},
"children": [
{
"tagName": "span",
"children": ["hello,world"]
}
]
}

  就表达了一个div标签里面有一个span标签,标签里面是个文本节点,文字内容就是’hello,world‘,react包保函了生成虚拟dom的函数react.createElement,以及Component这个类,我们自己写的类需要继承这个类,主要是继承一些react的高级方法,而包react-dom的核心功能就是把这些虚拟Dom渲染到文档中变成实际dom,当然了除了渲染这个功能之外还有一些其他的方法,这里就不多说了。

react和react-dom是什么?的更多相关文章

  1. React的虚拟DOM

    ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...

  2. JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  3. react 的虚拟dom

    前端优化的主要方面就是减少页面的DOM操作,减少重排和重绘,React在这方面做了优化,采用了所谓的虚拟DOM,其实我们平时也会遇到虚拟DOM,只是你没有注意罢了,请听我娓娓道来.  所谓的虚拟DOM ...

  4. React:关于虚拟DOM(Virtual DOM)

    Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象. React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件 ...

  5. React virtual DOM explained in simple English/简单语言解释React的虚拟DOM

    初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...

  6. 【React自制全家桶】二、分析React的虚拟DOM和Diff算法

    一.React如何更新DOM内容: 1.  获取state 数据 2.  获取JSX模版 3.  通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...

  7. 深入理解 React 的 Virtual DOM

    React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你 ...

  8. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  9. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

  10. React的React Native

    React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...

随机推荐

  1. html2canvas滚动截图

    滚动截图 项目需求要进行动态的滚动截图搜索一下发现html2canvas可以实现截图,但是滚动截图网上搜罗了一遍发现不是很完善所以记录下 首先npm一下安装依赖: npm install html2c ...

  2. ASP.NET Core框架探索之Authentication

    今天我们来探索一下ASP.NET Core中关于权限认证,所谓权限认证,就是通过某些方式获取到用户的信息. 需要开启权限认证,我们首先需要在容器中注入认证服务,使用services.AddAuthen ...

  3. ArcGIS进行容积率计算

    空间分析--题目2 容积率(Plot Ratio/Floor Area Ratio/Volume Fraction)又称建筑面积毛密度,是指一个小区的地上总建筑面积与用地面积的比率.对于开发商来说,容 ...

  4. new和@Autowired的区别

    controller层: @RequestMapping("/payment") @RestController public class WxPayController { pu ...

  5. springboot 踩坑之路之 Configuration Annotation Proessor not found in classpath

    1.出现spring boot Configuration Annotation Proessor not found in classpath的提示是在用了@ConfigurationPropert ...

  6. eclipse新建maven项目:'Building' has encountered a problem. Errors occurred during the build.

    二.eclipse 新建maven 项目报错(因为没有配置maven环境) 1.问题: ① 出现的问题1: Could not calculate build plan:Plugin org.apac ...

  7. 如果一个service服务出现异常,无响应,如何定位,定位过程

    假设一个service服务出现异常,要如何定位

  8. snort规则

    一.Snort规则分为两个部分 二.规则头的基本格式 动作: 动作描述一个数据包的"谁,在何处,什么"的问题,并指明规则被激发后,在事件中应当做什么.在编写规则时,你可以从下面的关 ...

  9. python写一个web目录扫描器

    用到的模块urliib error #coding = utf-8 #web目录扫描器 by qianxiao996 #博客地址:https://blog.csdn.net/qq_36374896 i ...

  10. .NET中XML序列化和反序列化常用类和用来控制XML序列化的属性总结(XmlSerializer,XmlTypeAttribute,XmlElementAttribute,XmlAttributeAttribute,XmlArrayAttribute...)

    序列化和反序列化是指什么? 序列化(seriallization): 将对象转化为便于传输的数据格式, 常见的序列化格式:二进制格式,字节数组,json字符串,xml字符串.反序列化(deserial ...