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引擎执行落地的整合流程图：

jsx后缀的是什么文件_React核心特性-从JSX到虚拟DOM相关推荐

jsx后缀的是什么文件_React-从JSX到虚拟DOM
JSX 简单来讲, React 为方便 View 层组件化,承载了构建 HTML 结构化页面的职责. JSX代码既可以写在.jsx后缀的文件或传统的js文件中,现在随着微软TypeScript的普及, ...
Patch:虚拟DOM最核心的部分--如何对比虚拟DOM树,以及如果生成真实DOM
虚拟DOM最核心的部分是patch,它可以将vnode渲染成真实DOM. patch也可以叫做patching算法,通过它渲染真实DOM时,并不会暴力覆盖原有DOM.而是比对新旧俩个vnode之间有哪 ...
后缀为PDF的文件要用什么工具才能打开？
今天在迅雷里下了些资料,解压后,文件的后缀为PDF我的系统只装了office 2003,不支持这个PDF,后来我又装了中文版的WPS Office 2005企业版,结果还是打不开. 以前也见过后缀为P ...
php修改css文件后缀,css样式表文件的扩展名是什么
css样式表文件的扩展名是".css",css样式表文件是用于装CSS代码的文本文件,而CSS代码具有一定规律规则的文本代码组成,css文件是以".css"为后 ...
webpack 入口文件 php,webpack,jsx_webpack jsx 找不到入口文件，webpack,jsx - phpStudy
webpack jsx 找不到入口文件文件目录: ├── README.md ├── components │ ├── plists.jsx │ └── search.jsx ├── ind ...
内存映射文件——Windows核心编程学习手札之十七
内存映射文件 --Windows核心编程学习手札之十七与虚拟内存一样,内存映射文件保留地址空间,并将物理存储器提交给该区域,差别在于所提交的物理存储器是磁盘上有文件存在的空间,而非系统的页文件,一旦 ...
C#中获取指定路径下指定后缀名的所有文件的路径的list
场景指定一个路径和后缀名,查找这个路径下所有以此后缀名结尾的文件. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获 ...
react 引入html文件_React起手式
一.引入React 1.从CDN引入(比较麻烦) 先引入 React: https:// .../react.x.min.js 再引入 ReactDOM: https://.../react-dom. ...
linux之用xargs删除这个目录下面后缀为txt的文件（包括子目录）
1问题删除这个目录下面后缀为txt的文件(包括子目录) 2.xargs命令解决 find . -name "*.txt" | xargs rm -rf 3.xargs相关用途比 ...

jsx后缀的是什么文件_React核心特性-从JSX到虚拟DOM

JSX

Virtual DOM

从JSX到Virtual DOM

jsx后缀的是什么文件_React核心特性-从JSX到虚拟DOM相关推荐

最新文章

热门文章