使用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. linux作业--第八周

    1.创建私有CA并进行证书申请. 配置文件存放路径 /etc/pki/tls/openssl.cnf [ CA_default ] dir = /etc/pki/CA # Where everythi ...

  2. egg项目eslint不识别链式操作符的解决方法

    项目用到链式?.结果eslint一直提示 const permissionHandleArr = positionPermissionHandle.map(item => item.permis ...

  3. Mysql备份方案总结性梳理

    Mysql备份方案总结性梳理   服务器 mysql 日志 数据库 配置 Mariadb binlog   mysql数据库备份有多么重要已不需过多赘述了,废话不多说!以下总结了mysql数据库的几种 ...

  4. LGP4463题解

    这玩意儿怎么看上去就很经典啊( 哦互不相同啊,那没事了( 考虑一个 \(\rm DP\).由于限制了互不相同,那么我们考虑从值域开始想. 设 \(dp_{n,k}\) 为在 \([1,n]\) 中选了 ...

  5. 2.3 C++STL vector容器详解

    文章目录 2.3.1 引入 2.3.2 代码实例 2.3.3 运行结果 总结 2.3.1 引入 vector 容器 动态数组 可变数组 vector容器 单口容器(尾部操作效率高) vector动态增 ...

  6. ybt1130:找第一个只出现一次的字符

    1130:找第一个只出现一次的字符 时间限制: 1000 ms         内存限制: 65536 KB提交数: 62333     通过数: 23786 [题目描述] 给定一个只包含小写字母的字 ...

  7. web服务器-nginx负载均衡

    web服务器-nginx负载均衡 一 负载均衡的作用 负载均衡: 分摊到多个操作单元上进行执行,和它的英文名称很匹配.就是我们需要一个调度者,保证所有后端服务器都将性能充分发挥,从而保持服务器集群的整 ...

  8. 修复ST-LINK V2下载器 | ST-LINK V2下载器烧录DAPLink固件

    前言 某宝上的STLINK V2下载器偶尔会坏掉,我们尝试修复一下 1.材料 (1)完好的STLINK V2下载器和坏掉的下载器各1个: (2)固件:https://gitee.com/Cai-Zi/ ...

  9. 解决Project出来的问题

    问题显现: 解决办法: 恢复默认布局

  10. Linux内核, 编译一个自己的内核

      本文,我们将一步一步地介绍如何从源代码编译和安装一个Linux内核.需要注意的是本指导基于Ubuntu 20.04版本编译安装,其它发行版可能会有差异. 在前面文章中我们反复提到过Linux内核, ...