JSX语法(个人学习笔记）

2024-02-22 12:55:16

JSX语法

JSX简介

jsx是Javascript和XML结合的一种语法糖，它可以让我们更快的编写代码，属于html+js混写。这种语法最先在react中使用，后来vue中也可以，但不常见。jsx语法用熟悉了自然是快的，但对初学者而言，并不是很容易理解。

jsx的优势
优点：

1.允许使用熟悉的语法来定义 HTML 元素树；

2.提供更加语义化且移动的标签；

3.程序结构更容易被直观化；

4.抽象了 React Element 的创建过程；

5.可以随时掌控 HTML 标签以及生成这些标签的代码；

6.是原生的 JavaScript。

对于各种优点下面详细介绍一下：

1.更加熟悉：许多团队都包括了非开发人员，例如熟悉 HTML 的 UI 以及 ux 设计师和负责完整测试产品的质量保证人员。使用 JSX 之后，这些团队成员都可以更轻松的阅读和贡献代码。任何熟悉基于 XML语言的人都可以轻松的掌握 JSX。此外，由于 React
组件囊括了所有可能的 DOM 表现形式（后续详细解释），因此 JSX 能巧妙地用简单明了的方式来展现这种结构。

2.更加语义化：提供更加语义化且易懂的标签(将传统的HTML标签封装成React组件)，我们就可以像使用HTML标签一样使用这个组件。

3.更加直观：JSX 让小组件更加简单、明了、直观。在有上百个组件及更深层标签树的大项目中，这种好处会成倍地放大。在函数作用域内，使用 jsx 语法的版本与使用原生 JavaScript 相比，其标签的意图变得更加直观，可读性也更高。

4.抽象化：对于使用 jsx 的人来说，从 React0.11升级到 React0.12是无痛的——不需要修改任何代码。虽然不是灵丹妙药，但是 jsx 提供的抽象能力确实能够减少代码在项目开发过程中的改动。

5.关注点分离：将HTML 标签以及生成这些标签的代码内在地紧密联系在一起。在 React 内，你不需要把整个程序甚至单个组件的关注点分离成视图和模板文件。相反，React
鼓励你为每一个关注点创造一个独立的组件，并把所有的逻辑和标签封装在其中。

JSX
以干净切简洁的方式保证了组件中的标签与所有业务逻辑的相互分离。它不仅提供了一个清晰、直观的方式来描述组件树，同时还让你的应用程序更加符合逻辑。

这里简单举个例子 jsx遇到<，就当作HTML解析，遇到{就当JavaScript解析.

比如我们写一段JSX语法

<h1>{1+2}</h1>
1

可以看到，除了h1的语义，js表达式也被识别了

jsx踩坑

jsx中不允许用class属性，需用className代替
组件名必须大写
事件必须修正this指针，且绑定事件名时要使用小驼峰的写法onclick必须写成onClick

constructor(props){
  super(props)
  this.fun = this.fun.bind(this)      
}

onClick = {() => ()} //绑定的事件名小驼峰写法
onClick = {this.fun.bind(this)}
1234567