react jsx是什么?

什么是JSX?

JSX即JavaScript XML,是一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。

这个是官网:http://facebook.github.io/jsx/

使用JSX的好处

1、更加熟悉

许多团队都包括了非开发人员,例如熟悉HTML的UI及UX设计师和负责完整测试产品的质量保证人员。使用JSX之后,这些团队成员都可以更轻松地阅读和贡献代码。任何熟悉XML语言的人都能轻松地掌握JSX.

2、更加语义化

除了更加熟悉外,JSX还能够讲JavaScript代码转换为更加语义化、更加有意义的标签。

<div className="divider">
    <h2>Question</h2>
</div>

变成

<Divider>Question</Divider>

3、更加直观

对比使用JS和JSX

//使用JS
render:function (){
  return React.createElement('div', {className: "divider"},
    "Label Text",
    React.createElement('hr')
  );
}
//使用JSX
render:function (){
  return <div className="divider">
      Labbel Text<hr/>
  </div>
}

很多人都认为JSX版本更加易懂,也更容易调试。

4、抽象化

上面的js写法可能会因为React的版本不同而不同。但是JSX提供的抽象能力却能够在升级的时候无痛修改。不需要修改任何代码

5、关注点分离

最后,也是React的核心。有HTML和JS代码在一起组成一个独立的组件,并把所有的逻辑和标签封装在其中。所以你只需要关注每一个独立的组件。JSX以干净且简洁的方式保证了组件中的标签和所有业务逻辑的相互分离。它不仅提供了一个清晰、直观的方式来描述组件树,同时还让你的应用程序更加符合逻辑。

Image placeholder
前端答疑
未设置
  62人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery和ajax是什么?

jquery是什么?jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了

React 基础_JSX

JSX简介 JSX是一种用于描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI。 JSX语法 基本语法 JSX的基本语法和XML语法相同,都是使用成对的标签构成一个树状结构的

为何jsx文件必须引入react

为何jsx文件必须引入react本质上来说JSX是React.createElement(component,props,...children)方法的语法糖。所以我们如果使用了JSX,我们其实就是在

jquery判断checkbox是否被选中?

jquery判断checkbox是否被选中?一、is()方法进行判断$("input[type='checkbox']").is(':checked')返回true或false二、attr()方法进行

Node.js是什么?有什么优势?有什么用途?

课程推荐:Java开发工程师--学习猿地精品课程 一、Node.js介绍Node.js是一个javascript运行环境。它让javascript可以开发后端程序,实现几乎其他后端语言实现的所有功能,

xlsxwriter 操作 Excel

xlsxwriter简介 用于以Excel2007+XLSX文件格式编写文件 优点 文本,数字和公式写入,速度很快,占用内存小 支持诸如格式设置,图像,图表,页面设置,自动过滤器,条件格式设置等功能

xlsxwriter 操作 Excel

xlsxwriter简介用于以Excel2007+XLSX文件格式编写文件,相较之下PhpSpreadsheet支持更多的格式读写。优点文本,数字和公式写入,速度很快,占用内存小 支持诸如格式设置,图

create-react-app是什么?

create-react-app是用于搭建react项目的脚手架。它的优势在于省略了很多涉及配置的地方,让新手能够更加容易上手,减低入门的门槛。使用脚手架create-react-app1.准备工作操

vue和react是什么?

vue是什么?有什么用?Vue.js是一款流行的JavaScript前端框架,一个用于创建用户界面的开源JavaScript框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图

vue和react的区别是什么?

vue和react的区别1、监听数据变化的实现原理不同Vue通过getter/setter以及一些函数的劫持,能精确知道数据变化。React默认是通过比较引用的方式(diff)进行的,如果不优化可能导

react native是什么?

ReactNative使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。ReactNative使

React Developer Tools是什么?

ReactDeveloperTools是一款由facebook开发的有用的Chrome浏览器扩展。通过它我们可以查看应用程序的React组件分层结构,而不是更加神秘的浏览器DOM表示。注意:该插件只对

vue和react的主要区别是什么?

Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计,其核心库只关注视图层,并且非常容易学习,也易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采用

weex和React Native的区别是什么?

weex简介:weex是阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的UI框架特点:Lightweight:轻量级,语法简单,易于使用Extendable:可扩展,丰富内置组件,可扩展的A

react native的优缺点是什么?

ReactNative使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。reactnative的

react和jquery的区别是什么?

首先我们要注意的是,虽然我们这里把React和JQuery拿到一个台面上来说,但是这两者是有本质区别的。React是一个UI库,但是JQuery更多的知识一个工具库或者说是插件库,我们之所以把这两者谈

react中的webpack是什么?

Webpack是一个开源的前端打包工具。Webpack提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。Webpack可以从终端、或是更改webpack.config

前端react是什么?

前端react是什么?前端react指的是reactjs,是Facebook推出的一个用来构建用户界面的JavaScript库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。

vue和react相似和区别是什么?

vue和react的相似之处使用虚拟dom提供了响应式和组件化的视图组件关注核心库,伴随于此,有配套的路由和负责处理全局状态管理的库都支持服务器端的渲染都支持native方案,React的reactn

Node.js 到底是什么?

Node.js是一个JavaScript的运行环境,听起来很棒,然而是什么意思呢?它又是怎么使用的呢? Node运行环境涵盖所有你运行用JavaScript编写的项目所需要的东西。如果你知道Java的

jsp和css的区别是什么?

jsp是什么?JSP全名为JavaServerPages,中文名叫java服务器页面,是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码;标签通常以结束。JSP技术有点类似ASP

js和jquery的区别是什么?

JavaScript和jQuery的区别:一、本质上的区别:js是网页脚本语言,而jQuery是基于js语言封装出来的一个前端框架。也就是说js是一种语言,而jQuery是基于该语言的一种框架。二、用

vuetifyjs的优点是什么?

官方网站:https://vuetifyjs.com/zh-Hans/Vuetify优点:几乎不需要任何CSS代码,而element-ui许多布局样式需要我们来编写Vuetify从底层构建起来的语义化

jquery和js的区别是什么?

jquery和js的区别是什么?一、首先来看一下jQuery和js的概念jquery是一个快速、简洁的JavaScript库,极大的简化了javascript编程。js是一种脚本语言,常用于网页客户端

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值