一，React是什么

1. 是JavaScript的库，可以简化可视化界面的开发
2. 是基于JSX语法（JavaScript Xml），JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写
3. 核心是组件，将数据和逻辑进行封装。提高了代码复用率，降低了代码维护的难度。

二，React虚拟DOM

React框架的核心优势之一， 就是支持创建虚拟DOM来提高页面性能。那么，什么是虚拟DOM呢？其实， 虚拟DOM这个概念很早就被提出来了， 是相对于实际DOM而言的。

设计人员在设计传统HTML网页的UI时， 都会在页面中定义若干的DOM元素， 这些DOM元素是所谓的实际DOM。通常， 页面中的实际DOM负责承载着外观表现和数据变化，任何外观形式的改变或数据信息的更新都要反馈到UI上， 都是需要通过操作实际DOM来实现的。

于是， 问题也就自然出现了。对于复杂的页面UI而言， 往往会定义大量的实际DOM。频繁地操作大量实际DOM， 往往会带来访问性能的严重下降， 用户体验也会随之变差， 这些都是设计人员所不希望看到的。因此， React框架专门针对这个现象引入了虚拟DOM机制，以避免频繁的DOM操作带来的性能下降问题。

React DOM类似于一种将相关的实际DOM组合在一起的集合， 是React的虚拟DOM对象，内置对象，将其理解为DOM组件应该更为贴切。因此，React框架将ReactDOM称为虚拟DOM。

示例代码：实际DOM

<div id="app"></div>
<script>
    let div = document.getElementById("app");
    let span = document.createElement("span");
    let h3 = document.createElement("h3");
    h3.innerHTML = "你好";
    let p = document.createElement("p");
    p.innerHTML = "世界";
    span.appendChild(h3);
    span.appendChild(p);
    div.appendChild(span);
</script>

示例代码：虚拟DOM

<div id="react-div"></div>
<script type="text/babel">
    let reactDiv = document.getElementById("react-div");
    //React.createElement中3个参数表示元素名字，空对象以及对象中的内容
    const reactH3 = React.createElement("h3", {}, "你好");
    const reactP = React.createElement("p", {}, "世界");
    const reactSpan = React.createElement("span", {}, reactH3, reactP);
    //将span渲染到div中去
    ReactDOM.render(reactSpan, reactDiv);
</script>

三，React的优势

• 声明式设计：React 采用声明范式，可以轻松描述应用。
• 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
• 灵活：React可以与已知的库或框架很好地配合。
• 使用JSX语法：JSX是JavaScript语法的扩展，可以极大地提高JS运行效率。
• 组件复用：通过React构建组件使得代码易于复用，可在大型项目应用开发中发挥优势。
• 单向响应的数据流：React实现了单向响应的数据流，减少了重复代码，比传统数据绑定方式更简单。

四，个人总结

React的核心在于它使用了虚拟DOM，使用这一技术的优点在于对于多个变量声明并输出时，可以减少代码的重复编写，采用React的内置库提高代码的复用能力，进而达到减少代码量的目的。

React的使用，要注意他的渲染机制以及对于集成函数的使用。