本文详细介绍了React的特点，包括组件化、声明式编码和虚拟DOM的运用。通过一个简单的React Native示例展示了如何使用React进行移动端开发。文章还深入探讨了虚拟DOM的概念，解释了它与真实DOM的区别，以及其在提高性能方面的作用。在实践中，虚拟DOM通过Diffing算法减少DOM操作，优化渲染效率。
一、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，并渲染在页面上。
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
