JSX语法介绍及使用方法

JSX是什么？

JSX是一种JavaScript的语法扩展，首先在React中被进入，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素。React主要使用JSX来描述用户界面，但React并不强制要求使用JSX ，而JSX也在React之外的框架得到了广泛的支持，包括Vue.js ，Solid 等。

将 HTML 直接嵌入了 JS 代码里面，这个就是 React 提出的一种叫 JSX 的语法，这应该是最开始接触 React 最不能接受的设定之一，因为前端被“表现和逻辑层分离”这种思想“洗脑”太久了。但实际上组件的 HTML 是组成一个组件不可分割的一部分，能够将 HTML 封装起来才是组件的完全体，React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的组件化成为了可能。

好消息是你可以不一定使用这种语法，现在要知道的是，要使用包含 JSX 的组件，是需要“编译”输出 JS 代码才能使用的。

JSX如何使用？

在JSX中可任意使用JavaScript表达式，但要包含在大括号里，例如：2 + 2，user.firstName，以及formatName(user)都是可以使用的。

12345678910111213141516 function formatName(user) { return user.firstName + ' ' + user.lastName;}const user = { firstName: 'Harper', lastName: 'Perez'};const element = ( <h1> Hello, {formatName(user)}! </h1>);ReactDOM.render( element, document.getElementById('root'));

书写JSX的时候一般都会带上换行和缩进，这样可以增强代码的可读性。与此同时在JSX代码的外面扩上一个小括号，这样可以防止分号自动插入的bug。

JSX本身其实也是一种表达式

在编译之后，JSX会被转化为普通的JavaScript对象。所以可以在if或者for语句里使用JSX，将它赋值给变量，当作参数传入，作为返回值都是允许的：

123456 function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>;}

转载请注明来自：https://www.qianyuthink.com/news/7432.html

上一页：直播APP制作的费用需要根据需求内容确定
下一页：Virtual DOM介绍及其优缺点