React | React的JSX语法(一)

简介: React | React的JSX语法React | React的JSX语法(一)

一、认识JSX语法

认识JSX

07edb2d8f09a47a5a62d4b37cf425fbd.png

这段element变量的声明右侧赋值的标签语法是什么呢?

  • 它不是一段字符串(因为没有使用引号包裹)
  • 它看起来是一段HTML元素,但是我们能在js中直接给一个变量赋值html吗?
  • 不可以,如果我们将type=“text/babel”去除掉,那么就会出现语法错误;
  • 这就是一段jsx语法


JSX是什么?

  • JSX是一种JavaScript的语法拓展(eXtension)也在很多地方称为JavaScript XML因为看起来像一段XML语法
  • 用于描述我们的UI界面,并且他可以可以和JavaScript融合在一起使用
  • 它不同于Vue中的模板语法,你不需要专门学习模板语法中的指令。如v-for,v-if

为什么React选择了JSX

  • React认为渲染逻辑本质上与其他UI逻辑存在内在耦合
  • UI需要绑定事件
  •  UI中需要展示数据状态
  • 在某些状态发生改变时,又需要改变UI


  • 他们之间是密不可分,所以React没有将标记分离到不同的文件中,而是将他们组合在一起,这个地方就是组件(Component)


  • JSX其实就是嵌入到JavaScript中的一种语法;


JSX的书写规范

  • JSX的顶层只能有一个根元素,所以我们很多时候在外层包裹一个div元素(或者Fragment)
  • 为了方便阅读,通常会在jsx的外层包裹一个小括号()并且jsxk有进行换行书写
  • JSX中的标签可以是单标签也可以是双标签
  • 如果是单标签必须以/>结尾

二、JSX的基本使用

JSX的使用

  • jsx中的注释

130cf58274b9461d973bd8053d49141c.png

jsx嵌入变量作为子元素

  • 当变量是Number,String,Array类型时,可以直接展示
  • 当变量是null,undefined,Boolean类型时,内容为空
  • 如果希望可以展示null,undefined,Boolean那么需要转成字符串
  • 如 toString,空字符串拼接,String(变量)等...


  • Object对象类型不能作为子元素(not valid as a React child)


  • jsx嵌入表达式
  • 运算表达式
  • 三元表达式
  • 执行一个函数

17d597aec5694139bf1ac04877a6762e.png

  • jsx绑定属性
  • 如元素都会有 title属性
  • img元素会有 src属性
  • a元素有 href属性
  • 元素需要绑定 class
  • 使用 内联样式style

8ec9766a9ff44911be2dba1d7afaed6b.png

三、JSX的事件绑定

React事件绑定

  • 如果原生DOM原有一个监听事件,如何进行操作?
  • 获取DOM原生,添加监听事件
  • 在HTML原生中,直接绑定onclick


  • 在React中如何操作呢?
  • React事件的命名采用小驼峰,而不是纯小写
  • 我们需要通过{}传入一个事件处理函数,这个函数会在事件发生时被执行;

this的绑定问题

  • 在事件执行后,我们需要获取当前类的对象中相关的属性,这个时候需要用到this
  • 如果直接打印this,会发现它是一个undefined


  • 为什么是undefined?
  • btnClick函数并不是我们主动调用的,而是当button发生改变时,React内部调用了btnClick函数
  • 而它内部调用时,并不知道如何绑定正确的this


  • 解决this问题
  • bind给btnClick显示绑定this
  • 使用ES6 class fields语法
  • 事件监听时传入箭头函数

ae61ed721c2749ef8847d9d0b9898c88.png

7cbe6f98d75e4faca463a0a04fc6efba.png

事件参数传递

  • 在执行事件函数时,我们需要获取一些参数值,如 event对象,其他参数


  • 获取event对象
  • 很多时候我们需要拿到event对象做一些事情(阻止默认行为...)
  • 默认情况下,event对象有被直接传入,函数就可以获取到event对象


  • 获取更多的参数
  • 我们需要获取更多的参数时,我们最好的方式是传入一个箭头函数,主动执行的事件函数,并传入参数

374fe8c695c14ed49bb61a861cf4b415.png

相关文章
|
1月前
|
JSON 前端开发 JavaScript
React源码解析-JSX
React源码解析-JSX
41 1
|
1月前
|
存储 Dart 前端开发
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
36 1
|
2月前
|
前端开发 JavaScript 开发者
React中JSX语法入门
React中JSX语法入门
|
2月前
|
前端开发 JavaScript
react JSX是什么,作用是什么
react JSX是什么,作用是什么
33 0
|
2月前
|
前端开发 JavaScript
【React学习】—jsx语法规则(三)
【React学习】—jsx语法规则(三)
|
2月前
|
前端开发 CDN
在单html页面中使用react并配置jsx
在单html页面中使用react并配置jsx
23 0
|
5月前
|
前端开发 JavaScript 容器
【react从入门到精通】React JSX详解
React JSX是一种在React中使用的JavaScript扩展语法,它允许我们使用类似HTML的语法来创建React元素和组件。使用JSX可以更方便地编写React应用程序,并使代码更易于阅读和理解。
|
5月前
|
存储 前端开发 JavaScript
React | React的JSX语法(二)
React | React的JSX语法(二)
React | React的JSX语法(二)
|
JavaScript 前端开发
React——jsx诞生的主要原因
React——jsx诞生的主要原因
95 0
|
17天前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
9 0