React学习笔记-2-什么是jsx?如何使用jsx？

时间  2019-11-18
标签 react 学习 笔记 什么 jsx 如何 使用 栏目 React 繁體版
原文   原文链接
  1. 什么是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来编写。


  2. 为何咱们要使用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的方法，分     成三个甚至是更多个文件，那么这个项目自己就要维护成百上千个文件了，这是一件很是可怕的事情，因此说在咱们讨论代码划分的合理性时，必定要研究清楚前提条件，   也就是代码的规模的大小.


  3. 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标签。

    第一个知识点：HelloMessage,元素名,咱们编写的每个组件其实也就是一个元素名，这里咱们声明了一个HelloMessage标签，在最后一行中，咱们将它渲染到了mountNode中，咱们能够看到，渲染的时候使用的语法就是标准的html语法，直接在标签中填写标签名，只是这个标签名是咱们自定义出来的。javascript

    第二个知识点：就是子节点 this.props.name,标签和标签之间能够有嵌套关系，就像咱们在html中编写的同样，每一个标签均可以嵌套在别的标签中，他也能够拥有不少的标签做为他的子节点，在jsx中，jsx和html嵌套不一样的一点就是能够在子节点中使用求值表达式，咱们能够看到图中的子节点本质上是一个文本节点，只是这个文本节点有两部分组成，第一个部分是Hello字符串，后面跟一个空格，第二部分是由大括号括起来的一个表达式，这个表达式所作的事情就是取出这个组件属性中的，name属性的值，并把它放在这个节点里，和hello+空格拼成一个完整的文本节点，至于什么是属性，咱们后面说。这里只要知道每一个组件都有属性，也就是props，属性内部会存不少属性和属性名。

    第三个知识点就是节点属性，<HelloMessage name="李明"></HelloMessage>,这里的name就是，咱们使用this.props.name来获取他的值，这个值从哪来呢，就是在使用标签的时候，咱们给定的。


  4. 补充几个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。直接使用会报错。


  5. 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>



  6. 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上面，css

            React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);

     



  7. jsx语法实例：嵌套
    6中的实例就有演示，以下代码
            React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body);

    咱们将咱们的自定义组件HelloWorld放到了div中，实际开发中，咱们能够嵌套无数个。html

  8. 条件判读的四种写法
    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使用比较计算符

    java

    <!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>

     

  9. 万能的函数表达式
    一般状况下，函数声明并非一个表达式，而是一个语句，可是咱们能够经过特殊的方式，将它改为表达式，从而能够直接调用函数获取返回值，因为他是一个表达式，咱们能够把它用在大括号中，咱们看下面的例子。
    <!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，就能够实现咱们想要的效果react

     (function(obj){
               })(this)

    这个括号还有一种写法，就是把(this)前面的括号放到后面，具体看代码，也是能够的。dom

    <!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的用法。ide

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程