0


React基础-JSX语法介绍

文章目录

JSX语法介绍

认识JSX语法

我们先来看一段代码

// 定义根组件const element =<div>Hello World</div>// 渲染根组件const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(element)

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

它不是一段字符串(因为没有使用引号包裹);

它看起来是一段HTML元素,但是我们能在js中直接将HTML元素赋值给一个变量吗?

其实是不可以的,如果我们将 type=“text/babel” 去除掉,那么就会出现语法错误;

它到底是什么呢? 其实它是一段jsx语法的代码;

JSX是什么?

JSX是一种

JavaScript的语法扩展

(eXtension),也在很多地方称之为JavaScript XML,因为看起就是一段XML语法;

它用于描述我们的UI界面,并且其完成可以和JavaScript融合在一起使用;

它不同于Vue中的模块语法,你不需要专门学习模块语法中的一些指令(比如v-for、v-if、v-else、v-bind);

**那么React选择JSX的原因是什么呢? React认为

渲染逻辑

本质上与其他

UI逻辑

存在内在耦合**

比如UI需要绑定事件(button、a原生等等);

比如UI中需要展示数据状态;

比如在某些状态发生改变时,又需要改变UI;

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

组件

(Component)**;

当然,后面我们还是会继续学习更多组件相关的东西;

在这里,我们只需要知道,JSX其实是嵌入到JavaScript中的一种结构语法;

JSX的书写规范:

JSX的顶层只能有一个根元素,所以我们很多时候会在外层包裹一个div元素(或者使用后面我们学习的Fragment);

为了方便阅读,我们通常在jsx的外层包裹一个小括号(),这样可以方便阅读,并且jsx可以进行换行书写;

JSX中的标签可以是单标签,也可以是双标签;

注意: 如果是单标签,必须以/>结尾;

JSX注释编写

在JSX部分写注释只能写多行注释, 并且包裹一个花括号

render(){const{ message }=this.state

  return(<div>{/* jsx的注释 */}<h2>{message}</h2></div>)}

标签: react.js javascript ui

本文转载自: https://blog.csdn.net/m0_71485750/article/details/126590668
版权归原作者 学全栈的灌汤包 所有, 如有侵权,请联系我们删除。

“React基础-JSX语法介绍”的评论:

还没有评论