什么是JSX?在React中使用JSX
(纯手打,如有错误的地方在下方评论,3Q)
什么是JSX
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。这个是官网:http://facebook.github.io/jsx/
举个栗子,在不适用JSX的React程序中创建一个标题的函数调用大概是这个样子:
使用JSX的好处
1.更加熟悉
许多团队都包括了非开发人员,例如熟悉HTML的UI及UX设计师和负责完整测试产品的质量保证人员。使用JSX之后,这些团队成员都可以更轻松地阅读和贡献代码。任何熟悉XML语言的人都能轻松地掌握JSX.
2.更加语义化
除了更加熟悉外,JSX还能够讲JavaScript代码转换为更加语义化、更加有意义的标签。
变成
3.更加直观
对比使用JS和JSX
很多人都认为JSX版本更加易懂,也更容易调试。
4.抽象化
上面的js写法可能会因为React的版本不同而不同。但是JSX提供的抽象能力却能够在升级的时候无痛修改。不需要修改任何代码
5.关注点分离
最后,也是React的核心。有HTML和JS代码在一起组成一个独立的组件,并把所有的逻辑和标签封装在其中。所以你只需要关注每一个独立的组件。JSX以干净且简洁的方式保证了组件中的标签和所有业务逻辑的相互分离。它不仅提供了一个清晰、直观的方式来描述组件树,同时还让你的应用程序更加符合逻辑。
复合组件
1.定义一个自定义组件
2.使用动态值
3.子节点
组件调用组件:https://reactjs.org/docs/components-and-props.html
JSX与HTML有何不同
JSX很像HTML,但却不是HTML语法的完美复制品。实际上JSX规范中这样声明:
这个规范(JSX)并不尝试去遵循任何XML或HTML规范。JSX是作为一种ECMAScript特性来设计的,至于大家觉得JSX像XML这一事实,那仅仅是因为大家比较熟悉XML。以上内容摘自:http://facebook.github.io/jsx/
属性
在HTML中我们用内联的方式给每个节点设置属性,像这样:
JSX以同样的方式设置属性,同时还提供动态js变量设置属性。用花括号包裹js变量甚至回调函数。
条件判断
在React中,一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起,这意味着你可以轻松地利用JavaScript强大的魔力,比如循环和条件判断。
在HTML中使用if/else逻辑很难。直接往JSX中加入if语句会渲染出无效的JavaScript:
上面会报错。。。
所以我们要使用以下某种办法:
- 使用三目运算符
- 设置一个变量并在属性中引用它
- 将逻辑转到到函数中
- 使用&&运算符
非DOM属性
下面的特殊属性只在JSX中存在
- key(提升性能的关键)
- ref(ref允许父组件在render方法之外保持对子组件的一个引用)
- dangerouslySetInnerHTML(设置原始的HTML)
事件
用React元素处理事件,跟Dom元素处理事件非常相似。官网Demo: https://reactjs.org/docs/handling-events.html
在dom中:
在React中:
注释
JSX本质上就是JavaScript,因此你可以在标签内添加原生的JavaScript注释。注释可以用以下两种形式添加:
- 当作一个元素的子节点
- 内嵌在元素的属性中
作为子节点
作为内联属性
也可以单行注释:
特殊属性
由于JSX会转换为原生的JavaScript函数,因此有一些js关键词我们也是不能使用的(如for何class)。
给表单里面的标签添加for属性需要使用htmlFor:
自定义class需要使用className:
样式
内联样式。React把所有的内联样式都规范化为驼峰形式,与JavaScript中的DOM对象的style属性一致。
没有JSX的React
如果没有JSX。。。以后再写
1.创建React元素
2.简写
JSX官方规范
2014年9月Facebook发布了一份JSX官方规范,陈述了他们要创造JSX的根本原因,以及一些关于语法上的技术细节。
你可以在http://facebook.github.io/jsx/上阅读到更多的信息
在浏览器中实验
https://reactjs.org/docs/hello-world.html这个地方有个JSFiddle的链接
https://reactjs.org/jsx-compiler.html这个地方有REPL环境
本文部分内容摘抄自<React引领未来的用户界面开发框架>
什么是JSX?在React中使用JSX相关推荐
- 只需5分钟教会你使用React中的JSX
JSX的基本使用 createElement()的问题 编写繁琐不简洁 非常的不直观,无法直接看出结构 不优雅,用户体验不好 JSX写法 JSX简介 JSX是Javascript的一种语法拓展 JSX ...
- React —— React 中的JSX语法
文章目录 一.什么是React 二.React 的特点 三.React第一个实例 四.JSX语法 1. 定义虚拟DOM时不要用引号. 2.标签混入JS表达式需要用{ } 3.className样式的类 ...
- react学习(42)----react中的jsx表达对象
JSX 表示对象 Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用. 以下两种示例代码完全等效: const element = (<h1 clas ...
- react学习(41)----react中的jsx简介
JSX 特定属性你可以通过使用引号,来将属性值指定为字符串字面量:const element = <div tabIndex="0"></div>;也可以使 ...
- react学习(40)----react中的jsx简介
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>; ReactDOM.render(elemen ...
- 歌谣学前端之React中jsx
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 ...
- React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
- 在vue中使用jsx
以前我们经常在react中使用jsx,现在我们在vue中也是用jsx,本文将总结一下,jsx在vue中是如何使用的. 一.安装babel插件 在之前我们需要安装@vue/babel-plugin-js ...
- React教程(二)——jsx语法、条件渲染、列表渲染
1.JSX 语法 在react中,就是使用jsx的语法,来实现DOM元素的展示.一个基本的jsx语法的react模板如下: <div>{this.props.title}</div& ...
最新文章
- 经验 | OpenCV图像旋转的原理与技巧
- python部署脚本_vsftp一键部署脚本
- c++ 如何判断无效指针_如果链表中有环,我们应该如何判断?
- android通过webservice连接SQL数据库(二)客户端
- 小师妹学JavaIO之:用Selector来发好人卡
- 李航-HMM-直接计算法
- SAP UI5 datajs.js response handling
- java读取resouces目录下文件
- Flex Builder 3 下载与注册
- P3986 斐波那契数列
- 小米路由器 charles无法抓包
- TCP/IP之传输层协议详解
- Maven私服nexus磁盘空间清理
- 一名【合格】前端工程师的自检清单
- Rect 和 Bounds
- 三门问题的扩展用c++模拟
- 【linux】shell脚本 ps 命令学习
- 船上上去了30个人,超载,现需要下去15个人。将所有人编号1-30,1-9报数,数到第九个人下船,直到15个人下完为止
- 【Origin双y轴】三条曲线,其中两条曲线共用一个y轴
- 老黄历吉日吉时查询接口实现及代码示例