一、React的特点

采用组件化模式、声明试编码，提高开发效率以及组件复用效率。
在React Native中可以使用React语法进行移动端开发。
使用虚拟DOM + 优秀的Diffing算法，尽量减少与真实DOM的交互。

1.虚拟DOM：

先将数据加载到虚拟DOM中，然后再渲染到真实的DOM中，其中虚拟DOM会与真实DOM进行比较，虚拟DOM会渲染到与真实DOM不同的组件，相同的地方不会重复渲染。
在这里插入图片描述

2.React包介绍

react.developement：react的核心库。
react-dom.developement：react的扩展库，提供与DOM相关的功能。
babel.min：babel可以将ES6的代码转为ES5的代码，将jsx转为js。
- jsx：是在js的基础上提出了一些新的要求和语法。jsx可以简化开发人员创建虚拟dom的代码。

3.Hello, React例子

下面是一个简单的react例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
        //  创建虚拟dom，注意：不要加单引号（Jsx写法）
        const vdom = <h1>Hello, React</h1>
        // 将虚拟dom渲染到对应的test容器中
        ReactDOM.render(vdom, document.getElementById('test'));
    </script>
</body>
</html>

运行结果如下所示：
在这里插入图片描述

4.虚拟dom到底是个什么东西

（1）在以上的代码基础上添加以下两个输出。

console.log('虚拟dom', vdom)
console.log('真实dom', document.getElementById('test'));

输出结果如下：
在这里插入图片描述

虚拟dom是带有属性的，而真实dom是直接输出。

（2）添加debugger进行调试如下：

console.log('虚拟dom', vdom)
console.log('真实dom', document.getElementById('test'));
debugger

切换到浏览器刷新页面查看如下：
在这里插入图片描述

发现真实dom存在大量的属性，而虚拟dom只有几个属性如下：
在这里插入图片描述

关于虚拟dom总结

本质是Object类型对象。
虚拟dom比较“轻”，真实dom比较“重”，虚拟dom是在react中使用，存在内存中，无需真实dom那样这么多属性。
虚拟dom最终会被react转换为真实dom，并渲染在页面上。

React虚拟DOM描述