前端利器React，为什么推荐JSX来替换JS
技术大咖秀2019-07-03 18:15
前端框架这几年更新非常快，传统的Boostrap、Jquery已经慢慢退位，现在大行其道的是React和Vue。其中就出身来讲，React来自科技巨头Facebook，似乎更牛逼一点。
React 自创了JSX语法，是一个 JavaScript 的语法扩展，官方建议在 React 中配合使用 JSX 来替代原始的 JS。因为JSX 可以更好的描述 UI 应该呈现出它应有交互的本质形式。JSX 看起来有点类似模版语言，但它具有 JavaScript 的全部功能。
一、为什么使用JSX
React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。
React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。
React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。
综上，有以下几点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。二、JSX 的使用
JSX看起来像是 JavaScript 和 Html 语言的组合，并柔和在一起，她提倡的是组件化的概念。我们直接看例子，
上面也可以在以上代码中嵌套多个 HTML 标签，但注意最外层需要使用一个 div 元素包裹它。
1、在 JSX 中嵌入表达式
比如声明了一个名为 name 的变量，然后在 JSX 中使用它，并将它包裹在括号中，
2、JSX 本身也是一个表达式
在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。也就是说，可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX。
3、JSX 特定属性
可以通过使用引号，来将属性值指定为字符串字面量；也可以使用大括号，来在属性值中插入一个 JavaScript 表达式。但是引号或大括号只能选择一种，不能同时使用。
这里还要注意下。因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
三、JSX 的对象编译和防注入
1、JSX 的对象编译
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。并且React.createElement() 会预先执行一些编译检查，以帮助你编写无错代码。
编译后的简化代码为，
被编译的对象被称为“React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。
2、JSX 的防注入攻击
React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击，使你在 JSX 当中插入用户输入内容更安全。
好了，以上就是 JSX 的简略说明，虽然 React 在实际使用中既可以使用 JS，也可以使用 JSX，但是官方的推荐还是 JSX 哦。
举报/反馈
0
0
收藏
分享
