JSX

回流，重绘
React
用于构建用户界面的javascript库（组件化开发）React是一个采用声明式，高效而且灵活的用来构建用户界面的框架
组件化开发
react组件封装了html代码，取代了javascript template模板，通过扩展

引入的三个库
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

JSX
javascript xml（数据格式） js的语法扩展
xml可扩展标记语言，被设计用来传输和存储数据
json写法比xml简单，类似与js对象，以键值对的形式保存
类型是安全的，
这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML
它被称为JSX，一种javascript的语法扩展

jsx->虚拟dom->dom树->绘制渲染
性能优化diff 比较

DocumentFragment 是DOM节点，他们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到dom树，在dom树中，文档片段被其所有的子元素所代替
因为文档片段存在与内存中，并不在dom树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算） 使用文档片段通常会更好的性能

虚拟DOM
用途通过创建虚拟dom与原dom树的比较，插入更新模板
算法diff算法

 

CDN
js，css 的外链
内容存储和分发技术
内容分发网络，解决网络拥挤问题，提升网络效率

总结
react综合显然性能较强 结合了jsx以及diff算法，通过创建虚拟dom与原dom树的比较，替换需要更新的模板，完成数据绑定
误区 一般情况下，原生js实现渲染性能好，从普适性和整体 性能来看 ，react做的diff算法在前端框架中较好