发布于2022-09-18 17:42 阅读(369) 评论(0) 点赞(24) 收藏(1)
我们先来看一段代码
// 定义根组件
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部分写注释只能写多行注释, 并且包裹一个花括号
render() {
const { message } = this.state
return (
<div>
{/* jsx的注释 */}
<h2>{message}</h2>
</div>
)
}
原文链接:https://blog.csdn.net/m0_71485750/article/details/126590668
作者:js是天下最好的语言
链接:http://www.qianduanheidong.com/blog/article/415425/90c518b66d50255deefa/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!