对网站政务建设的建议,团购模板网站,自助外贸网站制作,啥叫优化JSX是什么#xff0c;React为什么使用JSX#xff0c;babel怎么转译JSX的
在前端的框架中有两种“描述UI”的方案#xff0c;一种是JSX语法#xff0c;一种是模板语言。
其中React就是选择的JSX#xff0c;Vue就是选择的模板语言。
JSX其实就是一个语法糖#xff0c;在…JSX是什么React为什么使用JSXbabel怎么转译JSX的
在前端的框架中有两种“描述UI”的方案一种是JSX语法一种是模板语言。
其中React就是选择的JSXVue就是选择的模板语言。
JSX其实就是一个语法糖在编写React代码的时候你可以不使用JSX来进行编写。在React中你写的JSX代码最终都会被babel编译。
// JSX语法
const element h1Hello,World!/h1// babel编译后
var element React.createElement(h1,null,Hello,world!);//React17版本之前
// React17版本之后
var _jsxRuntime require(react/jsx-runtime);
var element _jsxRuntime.jsx(h1,{children:Hello World!});JSX由babel转换成React.createElement或_jsxRuntime.jsx的形式函数执行后返回虚拟DOM所以说你可以不使用JSX可以直接写React.createElement或_jsxRuntime.jsx的形式。 所以我们写的代码最终都会被构建成虚拟DOM树。JSX就是一种类XML语法的语法糖让开发者来构建这个虚拟DOM树更加的方便使代码更加的简洁。
那么babel是怎么样将JSX语法转换成React.createElement或_jsxRuntime.jsx的形式的呢
babel编译JSX的流程分为三个部分
parse通过parse将JSX代码转换成AST。transform在transform阶段使用babel/plugin-transform-react-jsx插件它的核心就是visitor函数通过这个函数来遍历AST根据不同的节点类型来做不同的处理生成了JSX对应的createElement对应的AST。generate最后由generate将AST转换为JS。
