浏览器解析jsx_React核心特性-从JSX到虚拟DOM

JSX

简单来讲， React 为方便 View 层组件化，承载了构建 HTML 结构化页面的职责。

JSX代码既可以写在.jsx后缀的文件或传统的js文件中，现在随着微软TypeScript的普及，成为了第三个支持JSX语法的源文件格式.ts(客观的说TypeScript是JavaScript的父集，兼容JS的所有API和语法，并且在这个基础之上使用了类似lamda表达式的语法增强了React中纯函数的声明方式)。

而JSX将原来html,和js代码分开编写解耦的思想又重新整合到一个文件中编写，同时解决了html和js的脚本隔离等特殊符号，双引号，单引号处理的问题。让你感觉不到是在写html还是在写js的业务逻辑，如果行云流水一般就把前端界面开发完了。这是React设计理念比较有创意的地方，逆袭了原来传统html,js,css解耦合的思想。即React更看中的是一个功能或组件的模块化，模块化的重要程度大于脚本的解耦性。作为一个开发，你只用去关心怎么把你的组件封装的更灵活，重用性更高，而剩下的问题就交由JSX编译器来实现,以下是JSX编译器的从编译到执行的过程：

Virtual DOM

真实页面对应一个 DOM 树。在传统页面的开发模式中，每次需要更新页面时，都要手动操作 DOM 来进行更新。 DOM 操作非常昂贵。我们都知道在前端开发中，性能消耗最大的就是 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护。 React 把真实 DOM 树转换成 JavaScript 对象树，也就是 Virtual DOM。

原生DOM同浏览器js执行引擎的交互过程：

加入React Virual DOM的执行过程:

从JSX到Virtual DOM

将JSX语法编译解析到最终在浏览器js引擎执行落地的整合流程图：