胖蔡说技术
随便扯扯

React jsx语法

JSX是什么?

JSXfacebook创建的一种语言约束,是一种JavaScript的语法扩展,被运用在React框架中,其格式类似于模板语言(JSP),但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,React使用JSX来描述用户界面。

如何使用?

JSX可以直接在jsjsx文件中定义:

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

 
  1. JSX中使用JavaScript表达式
    JSX中插入JavaScript表达式十分简单,直接在JSX中将JS表达式用大括号括起来即可。
ReactDOM.render(
     <div>
       <h1>{1+1}</h1>
     </div>
     ,
     document.getElementById('example')
 );
 

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

  • 变量名
  • 函数定义表达式
  • 算数表达式
  • 关系表达式
  • 逻辑表达式
  • 函数调用表达式
  • 属性访问表达式
  1. 防注入攻击
    React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSScross-site-scripting, 跨站脚本)攻击。
const title = response.potentiallyMaliciousInput;
 // 直接使用是安全的:
 const element = <h1>{title}</h1>;
 
  1. JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化
  2. 类型安全的,在编译过程中就能发现错误
赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » React jsx语法
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏