首页 > 代码库 > React学习笔记-2-什么是jsx?如何使用jsx？
React学习笔记-2-什么是jsx?如何使用jsx？
- 什么是jsx？
JSX是JavaScript XML 这两个单词的缩写，xml和html非常类似，简单来说可以把它理解成使用各种各样的标签，大家可以自行 百度。所以jsx就是在javascript中来编写长得很像xml的语言，这里只是像，在本质上是不一样的。
jsx是一种基于Ecmascript的一种新特性，
是一种定义带属性树结构的语法，树结构就是我们的dom结构，属性就是dom节点中的属性，比如所class，id等
jsx不是xml或者Html，
不是一种限制。在react中，我们可以使用jsx来编写代码，也可以使用纯javascript来编写代码，所以说即使你不学jsx也可以正常使用react，但是Facebook官方腿甲使用jsx来编写。 - 为什么我们要使用jsx呢？
因为jsx有五个特点
第一个：类xml语法容易接受，在实际的工程中，还有别的人员接触前端代码，比如设计师，测试等等，他们很多人可能不熟悉javascript，但是很多人熟悉xml
第二个：增强js的语义，js主要体现在界面的逻辑方面，但是对于界面元素的表现，js是比较弱的，在不使用jsx之前，大部分时候我们使用的是模板，模板其实就是一段字 符串，你在模板里面写东西是可以的，模板的问题在于他页面的内容本身是分离的，并且模板本身是字符串，我们很难对其进行扩展，但是jsx是直接在js的基础上去编写
html，他的本质并不是字符串，就是js语言本身，所以说他可以在语义层面上增强js
第三个：结构清晰，使用jsx来编写代码，我们通过代码就可以知道生成的结果是什么，就像看html代码一样。
第四个：抽象程度高，带来的第一个好处就是，react屏蔽掉了所有的手动dom操作，之所以能够屏蔽dom操作，就是因为他像上提供了一个新的抽象层，作为开发者我们
只需要关注这一个抽象层，而不必关心抽象层下面到底是如何去实现的，从而屏蔽掉了手动的dom操作，抽象带来的第二个好处就是跨平台，从而诞生了react native。 为什么可以跨平台呢？你使用jsx去编写的时候，其实是独立于平台的语法，你设计是平台本身，react完全可以在不同的平台上提供解释器，从而可以让你的代码执行在不 同的平台上，所以我们说抽象是jsx的核心。
第五个：代码模块化，在传统的MVC开发中，MVC其实是分离的，无论是在概念上，还是在实际的代码上，他们三者往往都不会放在一起，但是在react中，我们发现，编 写一个组件的时候，他的相关代码全部都放在了一起，jsx中，既可以js的逻辑，有可以写页面的结构，乍一看，好像是不太合适，我们学到的经验是吧不同的经验区分出 来，有助于开发的进行。那react将他们都混在了一起，这样是一个好的选择吗？其实react所做的部分是一个横向的划分，MVC所做的事情是纵向的划分，也就是手MVC 把整个项目从上到下切了两刀，把它切成了三个部分，但是react所做的事情是把一个项目从左到右，切成了很多部分，或者说他既结合了从上到下，又结合了从左到右， 把一个大的项目打散成为了许多小的项目，从而实现代码的模块化，在代码的力度变得非常小的时候，我们就可以专注于一个非常具体的功能，在这种情况下，把他们的代 码都放在一起，更有助于理解，并且有助于代码本身的组织是，是想一下，如果你把你一个项目拆成了几十上百个晓得模块，你还要在每一个模块上运用MVC的方法，分 成三个甚至是更多个文件，那么这个项目本身就要维护成百上千个文件了，这是一件非常可怕的事情，所以说在我们讨论代码划分的合理性时，一定要研究清楚前提条件， 也就是代码的规模的大小. - jsx的语法
<script type="text/jsx"> var HelloMessage=React.createClass({ render:function(){ return <div className="test">Hello{this.props.name}</div>; } }); React.render(<HelloMessage name="李明"></HelloMessage>>,mountNode); </script>
看这个例子，很简单，只是实现了render函数，从上面的代码中，我们可以看出，jsx其实本质上就是js，他和js的区别就是可以直接在里面编写html标签，这在普通的js中是无法实现的，要想实现只能采用字符串的形式来拼接标签，但是在jsx中，可以原生的支持html标签。
第二个知识点：就是子节点 this.props.name,标签和标签之间可以有嵌套关系，就像我们在html中编写的一样，每个标签都可以嵌套在别的标签中，他也可以拥有很多的标签作为他的子节点，在jsx中，jsx和html嵌套不同的一点就是可以在子节点中使用求值表达式，我们可以看到图中的子节点本质上是一个文本节点，只是这个文本节点有两部分组成，第一个部分是Hello字符串，后面跟一个空格，第二部分是由大括号括起来的一个表达式，这个表达式所做的事情就是取出这个组件属性中的，name属性的值，并把它放在这个节点里，和hello+空格拼成一个完整的文本节点，至于什么是属性，我们后面说。这里只要知道每个组件都有属性，也就是props，属性内部会存很多属性和属性名。
第一个知识点：HelloMessage,元素名,我们编写的每一个组件其实也就是一个元素名，这里我们声明了一个HelloMessage标签，在最后一行中，我们将它渲染到了mountNode中，我们可以看到，渲染的时候使用的语法就是标准的html语法，直接在标签中填写标签名，只是这个标签名是我们自定义出来的。
第三个知识点就是节点属性，<HelloMessage name="李明"></HelloMessage>,这里的name就是，我们使用this.props.name来获取他的值，这个值从哪来呢，就是在使用标签的时候，我们给定的。 - 补充几个react语法的关键内容。
第一：首字母大小写。react对于首字母的大小写是敏感的，如果一个组件的首字母是大写，那么react就知道他是一个自定义的组件，如果是小写，react就会把它当做自带dom的自带元素名，比如说我们上面代码中的HelloMessage首字母就是大写，是自定义的组件，后面的div首字母是小写，因为他是dom中的组件，如果你的自定义组件首字母是小写，那么字啊render渲染的时候会出错，因为react会去dom中寻找，但是显然你自定义的组件是不会存在于dom标准组件中，所以就会出错。
第二：嵌套。组件和组件之间，就像dom和dom之间，可以进行嵌套，上面代码中我们只进行了一层嵌套，就是在div中嵌套了一个文本节点，其实可以在里面嵌套各种各样的无数节点
第三：求值表达式。求值表达式其实和jsx本身是没有什么关系的，他是作为js本身的一个特性，js中有几种语法元素，比如关键字，语句，表达式等等，那么求值表达式是什么意思？就是他本身是一个表达式，他会返回一个值，这里我们需要强调的是求值表达式和语句本质上是不一样的，也就是说，我们在编写jsx的时候，大括号里面，不可以使用语句，比如if语句，for语句，switch语句等，都是不可以的，但是求值表达式可以的，那我们应该如何去区分求值表达式和和语句呢？多个表达式可以联合使用，但是语句是不可以的，比如图中的this.props.name是一个字符串形式的表达式，他会返回一个字符串，我们可以对他进行一些运算，比如说给他加个abc，做字符串的加法，把他们连到一起，这是可以的，但是如果是是个if语句，你是不能在if语句进行运算的，语句是不能进行运算的，但是表达式可以，所以区分表达式和语句的方法就是看他能不能进行运算。虽然我们不能直接使用if等语句，但是我们可以把它包裹在函数求值表达式中，从而在函数求值表达式内部来使用这个语句，但是这个函数本身是一个表达式，所以我们可以把它用在jsx的大括号中，这样我们就实现了可以在大括号中运行各种语句，但是在实际使用中，这并不是一个很好的情况，如果有这样的情况，建议把它独立出来，然后在大括号中来调用这个函数。
第四：驼峰命名。jsx标签使用的是驼峰命名，函数名也是。
第五：两个特殊的属性。html的标签中可以使用html属性和class属性，但是我们现在是在js的上下文中区编写html文件，html和class是js得保留字和关键字，所以我们不能直接把他写在js中，jsx解决这个问题的办法就是使用两个别名来代替他们，也就是htmlFor和className，如果我们要使用html和class属性，我们实际要写的是htmlFor和className，在解释器解释的时候，会自动把他们一一对应过去，可以看到我们上面的代码中，div的class就是写的className。直接使用会报错。 - jsx语法实例---注释
添加注释有两种方法，第一种是多行注释，使用/**/,第二种是单行注释，使用//,
注释可以放在两个部分。
第一个部分：子节点中，也就是标签包裹的这一部分，这里需要使用大括号来包裹注释。下面的代码中，HelloWorld后面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var HelloWorld=React.createClass({ render: function(){ return <p>Hello,world{ /* 这是一个多行注释 */ //这是一个单行注释 }</p> } }); React.render(<HelloWorld></HelloWorld>,document.body); </script> </body> </html>
第二个部分：属性中，也就是标签本身这里
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var HelloWorld=React.createClass({ render: function(){ return <p /* 这是一个注释 */ name="李明"//这里是一个属性，单行注释也可以和属性放在同一行 //这是一个单行注释 >Hello,world { /* 这是一个多行注释，放在了子节点中 */ "Jerry"//他是字符串，由于被包裹在大括号中，本身应该是js，所以应该用双引号包裹 //我是单行注释 } </p> } }); React.render(<HelloWorld></HelloWorld>,document.body); </script> </body> </html>
- jsx语法实例--如何在jsx里面书写css样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,world</p> } }); React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body); </script> </body> </html>
需要注意的是其他属性的赋值一般是字符串，但是style 属性的赋值一般是一个对象，这是因为style属性比较特殊，react会把style里面自定义的属性，正确的应用到style上面，
React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);
- jsx语法实例：嵌套
6中的实例就有演示，如下代码
React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);
我们将我们的自定义组件HelloWorld放到了div中，实际开发中，我们可以嵌套无数个。
- 条件判读的四种写法
if语句不是一个表达式，他是一个语句，所以说在编写jsx代码的时候，我们不能直接使用if语句，但是我们可以使用四种表达式来实现相同的效果
我们实现这个功能，如果传入属性name的值，我们就输出name的值，如果没有，我们就输出world
8.1使用三元表达式
如果我们直接使用 if....else语句会直接报错，代码如下。
点击查看代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{ if(this.props.name) this.props.name esle "world" }</p> } }); React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body); </script> </body> </html>
所以这里我们使用三元表达式，如下代码，可以吧HelloWorld里，name的属性去掉以后，在看看效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{this.props.name ? this.props.name : "world"}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
8.2使用一个变量，我们通过函数来个这个变量赋值，最后把变量的值直接用在大括号里。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ getName:function(){ if(this.props.name) return this.props.name else return "world" },//这里有逗号，切记 render: function(){ var name=this.getName(); return <p>Hello,{name}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
8.3改8.2中的例子，直接把大括号去掉，直接调用<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ getName:function(){ if(this.props.name) return this.props.name else return "world" },//这里的逗号 render: function(){ return <p>Hello,{this.getName()}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
8.4使用比较计算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{this.props.name || "world"}</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
- 万能的函数表达式
通常情况下，函数声明并不是一个表达式，而是一个语句，但是我们可以通过特殊的方式，将它改成表达式，从而可以直接调用函数获取返回值，由于他是一个表达式，我们可以把它用在大括号中，我们看下面的例子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{ (function(obj){ if(obj.props.name) return obj.props.name else return "world" })(this) }</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
这个例子要注意理解强制求值运算，也就是把function包裹起来的那个括号，在这个括号里面的function会被强制求值运算，他会返回一个函数的引用，然后我们又在后面加了一个(this),用()来调用他， 并传入一个this，就可以实现我们想要的效果
(function(obj){ })(this)这个括号还有一种写法，就是把(this)前面的括号放到后面，具体看代码，也是可以的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script> <script type="text/jsx"> var style={ color:"red", border:"1px solid #f09", }; var HelloWorld=React.createClass({ render: function(){ return <p>Hello,{ (function(obj){ if(obj.props.name) return obj.props.name else return "world" }(this)) }</p> } }); React.render(<div style={style}><HelloWorld name="李明"></HelloWorld></div>,document.body); </script> </body> </html>
括号放在外面和里面的区别，放在里面的时候，括号执行完毕拿到的是函数的引用，然后在调用他，但是括号放在外面的时候，弄到的直接就是返回值，而不是函数引用本身。建议大家看看this的用法。
React学习笔记-2-什么是jsx?如何使用jsx？
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。