将脚手架(create-react-app)创建的todolist项目精简为hello world示例

即，删除自动生成的样式文件、logo.svt、App.test.js、serviceWorker.js等文件，并精简App.js和index.js里的代码，结果如下：

npm run start 后，浏览器界面仅显示纯文本 Hello world !

一，虚拟DOM

首先，看一段html片段

<div id="container">

    <p>这里是p标签里的文本节点</p>

    <ul>

        <li class="item">这里是li标签里的文本节点</li>

        <li class="item">这里是li标签里的文本节点</li>

        <li class="item">这里是li标签里的文本节点</li>

    </ul>

</div>

上面的html片段会最终生成为DOM对象，并由浏览器渲染到页面上。

而虚拟DOM,就是用一个JS对象模拟上面的DOM元素和结构：

['div', { id: 'container' }, [

    ['p', {}, '这里是p标签里的文本节点'],

    ['ul', {},[

        ['li', { class: 'item' }, '这里是li标签里的文本节点'],

        ['li', { class: 'item' }, '这里是li标签里的文本节点'],

        ['li', { class: 'item' }, '这里是li标签里的文本节点']

    　　]
    ]
　]

]

这里用伪代码进行了模拟。虚拟DOM和真实DOM都是js对象。

为何引入虚拟DOM？因为操作真实DOM耗性能。而DOM操作影响性能，最主要的原因就是因为它导致了浏览器的重绘（repaint）和重排（reflow）。

浏览器渲染原理简单描述：浏览器下载到html文档后，会解析文档的结构来构建DOM树；解析css文件，产生css规则树；然后根据DOM树和css规则树构建出渲染   树；最后渲染到浏览器界面上。

每一次的DOM操作(element.style.borderColor = '#f00';),都会触发页面的重绘或重排。

但是如果换成操作虚拟DOM，假设操作ul下的li标签,添加1000个li标签并设置内容颜色，对于上面模拟的对象来说完全是在内存中完成，性能损耗几乎不计。

操作完虚拟DOM后，再映射为真实DOM，交给浏览器渲染，这样性能损耗就只是替换映射这个环节以及渲染一次的过程了。

以上只是对虚拟DOM的简单描述，总之，虚拟DOM的目的是将所有操作累加起来，统一计算(Diff算法)出所有的变化后，统一更新一次DOM。

二、ReactJS中的JSX语法

JSX全称 JavaScript XML

其实就是对js语法进行了扩展，可以在js代码中写xml标签

作用：用来创建虚拟DOM对象。

import React, { Component } from 'react';

class App extends Component {

  render() {

    return (

      <div>

        Hello world !

      </div>

    );

  }

}

export default App;

例如，App.js中，App组件（react中，继承了Component的类，就是一个组件）中的render方法就是返回了一个虚拟DOM对象。return(<div>Hello world ！</div>)中的div并不是虚拟DOM对象，它只是JSX语法，React会最终将其生成一个虚拟DOM对象。

将App.js中的代码做如下修改：

import React, { Component } from 'react';

class App extends Component {

  render() {

    return (

      <div>

        <Test1/>

        <Test2/>

        Hello world !

      </div>

    );

  }

}

class Test1 extends Component {

  render() {

    return (

      <div>

        Test1

      </div>

    );

  }

}

class Test2 extends Component {

  render() {

    return (

      <div>

        Test2

      </div>

    );

  }

}

export default App;

此时浏览器显示结果为：

在App组件中包含了两个子组件Test1和Test2,

可以简单地理解为App组件生成的虚拟DOM是由多个‘子虚拟DOM’组成，最后会将这个大的虚拟DOM映射成真实DOM，由浏览器渲染到页面上。（挂载到id=root的节点上）

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

    <meta

      name="viewport"

      content="width=device-width, initial-scale=1, shrink-to-fit=no"

    />

    <title>React App</title>

  </head>

  <body>

    <div id="root"></div>

  </body>

</html>

2.ReactJS基础(虚拟DOM,JSX语法)的更多相关文章

  1. 9 react 基础 - 虚拟DOM

    一.虚拟DOM React 原理 1. 存放 state 数据 2. JSX 模版 3. 数据 + 模版 生成虚拟DOM(虚拟DOM就是一个JS 对象, 用来描述真实DOM) eg: ['div', ...

  2. JSX语法简介

    React的核心机制之一就是可以在内存中创建虚拟的DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. JSX简介 JSX就是Javascript和XML结合的一种格式.Reac ...

  3. React/虚拟DOM

    在说虚拟DOM之前,先来一个引子,从输入url到展现出整个页面都有哪些过程? 1.输入网址 2.DNS解析 3.建立tcp连接 4.客户端发送HTPP请求 5.服务器处理请求 6.服务器响应请求 7. ...

  4. react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  5. React实例入门教程(1)基础API,JSX语法--hello world

      前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...

  6. 【原创】React实例入门教程(1)基础API,JSX语法--hello world

    前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...

  7. React入门-JSX和虚拟dom

    1.JSX理解 举例: const element = <h1>Hello, world!</h1>; 这被称为 JSX,是一个 JavaScript 的语法扩展.建议在 Re ...

  8. 深刻理解 React (一) ——JSX和虚拟DOM

    版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/155 来源:腾云阁 https://www.qclou ...

  9. react入门-----（jsx语法，在react中获取真实的dom节点）

    1.jsx语法 var names = ['Alice', 'Emily', 'Kate']; <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的 ...

随机推荐

  1. vue-文字块收缩与展开功能

    在设计图中要求的效果为: 文字限制超过9行即隐藏,并显示“展开”按钮,点击按钮进行切换,控制文本全部展示和部分展示 在原本的实现过程中,使用了红框内的判断方式: 页面代码: 样式则规定嵌套元素给一个死 ...

  2. react .net core 发布 Access-Control-Allow-Origin Cors

    本案例用IIS部署 1. 在react上先publish: npm run build 生成了build文件,在此文件里添加web.config,注意httpProtocol是用来跨域的. <? ...

  3. centos7与centos6命令区别

    CentOS 7 vs CentOS 6的不同    (1)桌面系统[CentOS6] GNOME 2.x[CentOS7] GNOME 3.x(GNOME Shell) (2)文件系统[CentOS ...

  4. 老男孩Python九期全栈学习笔记3

    day3 1.上周五内容回顾 格式化输出:%s %d %%:输出% 编码: ASCII码只能显示英文.数字和特殊字符. Unicode:万国码,最开始使用16位表示一个字符,中文不够,后来使用4个字节 ...

  5. wget 使用

    1.很多软件官网会有安装脚本,并把脚本搞成raw模式,方便下载后直接运行的shell文件.比如docker wget -qO- get.docker.com | bash -q的含义是:--quiet ...

  6. c++中各类型数据所占字节数（一）

    转自: https://blog.csdn.net/hi_baymax/article/details/82415896 和机器字长及编译器有关系: 所以,int,long int,short int ...

  7. 性能测试遭遇TPS抖动问题

    目前性能测试组正在对独立秒杀进行性能压测,性能抖动特别厉害. 由于独立秒杀的接口大多数是经过volicity渲染过的页面和数据的整合,所以在压测的时候有很多volicity的错误.初步判定,感觉是vo ...

  8. C++学习笔记：多态篇之虚析构函数

    动态多态中存在的问题:可能会产生内存泄漏! 以下通过一个例子向大家说明问什么会产生内存泄漏: class Shape//形状类 { public: Shape(); virtual double ca ...

  9. scrapy框架学习第一天

    今天是学习的第一天: 知识总结如下: 1,调试器相当于原料出口地(URL提供) 2,scrapy相当于中间加工商(具有销售权利)封装URL为request(请求) 3,下载器使用request(请求) ...

  10. [宽度优先搜索] FZU-2150 Fire Game

    Fat brother and Maze are playing a kind of special (hentai) game on an N*M board (N rows, M columns) ...