React jsx语法

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的元素来使用。

有什么特点？

1. 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>;
 }

 

2. 在JSX中使用JavaScript表达式
   在JSX中插入JavaScript表达式十分简单，直接在JSX中将JS表达式用大括号括起来即可。

ReactDOM.render(
     <div>
       <h1>{1+1}</h1>
     </div>
     ,
     document.getElementById('example')
 );
 

jsx中支持的js表达式有如下类型:

• 变量名
• 函数定义表达式
• 算数表达式
• 关系表达式
• 逻辑表达式
• 函数调用表达式
• 属性访问表达式

3. 防注入攻击
   React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

const title = response.potentiallyMaliciousInput;
 // 直接使用是安全的：
 const element = <h1>{title}</h1>;
 

4. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化
5. 类型安全的，在编译过程中就能发现错误