JSX是什么？
JSX是facebook创建的一种语言约束，是一种JavaScript的语法扩展，被运用在React框架中，其格式类似于模板语言(JSP)，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。
如何使用？
JSX可以直接在js或jsx文件中定义：
const element = <h1>Hello, React!</h1>;
用来描述UI的一个元素，React中入口文件的定义就是一个jsx的使用：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
const element = <h1>Hello, React!</h1>;
ReactDOM.render(
<React.StrictMode>
{ element }
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
我们可以用自定义的jsx、或者直接使用html的元素来使用。
有什么特点？
-
JSX代表JS对象
JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。你可以在if语句或for循环中使用JSX，你可以将它赋值给变量，你可以将它作为参数接收，你也可以在函数中返回JSX。
function getReactJsx(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, React.</h1>;
}
-
在
JSX中使用JavaScript表达式
在JSX中插入JavaScript表达式十分简单，直接在JSX中将JS表达式用大括号括起来即可。
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
jsx中支持的js表达式有如下类型:
-
变量名
-
函数定义表达式
-
算数表达式
-
关系表达式
-
逻辑表达式
-
函数调用表达式
-
属性访问表达式
-
防注入攻击
React DOM在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止XSS（cross-site-scripting, 跨站脚本）攻击。
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;
-
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化
-
类型安全的，在编译过程中就能发现错误
原文始发于微信公众号（胖蔡话前端）：React jsx语法
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/223110.html
