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语法,直接在标签中填写标签名,只是这个标签名是我们自定义出来的。

    第二个知识点:就是子节点 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上面,

            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中,实际开发中,我们可以嵌套无数个。

  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使用比较计算符

    <!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,就可以实现我们想要的效果

     (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?的更多相关文章

  1. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  2. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  3. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  4. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  5. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  6. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  7. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  8. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  9. React学习笔记 - Hello World

    React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...

  10. React学习笔记(五)State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

随机推荐

  1. 51nod 简单的动态规划

    1006 最长公共子序列Lcs 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). ...

  2. 10 行 Python 代码写的模糊查询

    导语: 模糊匹配可以算是现代编辑器(在选择要打开的文件时)的一个必备特性了,它所做的就是根据用户输入的部分内容,猜测用户想要的文件名,并提供一个推荐列表供用户选择. 样例如下: Vim (Ctrl-P ...

  3. Android Studio22-NDK-LLDB调试

    Android Studio2.2更好的支持NDK开发,并可以像开发java一样的DEBUG程序,不需要添加gradle-experimental插件,就可调试代码! 一,下载 NDK 和构建工具 要 ...

  4. linux搭载discuz

    公司论坛是用discuz,简单了解了一下,原来是php+mysql搭载的论坛,于是本鸟便试试搭载discuz试试怎么玩,下面是linux下搭载discuz的过程 第一步是下载,由于discuz是运行在 ...

  5. [React] 多组件生命周期转换关系

    前段时间一直在基于React做开发,最近得空做一些总结,防止以后踩坑. 言归正传,React生命周期是React组件运行的基础,本文主要是归纳多组件平行.嵌套时,生命周期转换关系. 生命周期 Reac ...

  6. Android 适配知识点

    转载:https://gold.xitu.io/post/58451c1d8e450a006c0f1c74 支持多种屏幕 Android 可在各种具有不同屏幕尺寸和密度的设备上运行.对于 应用,And ...

  7. ckeditor+angularjs directive

    var cmsPlus = angular.module('cmsPlus', []); cmsPlus.directive('ckEditor', function() { return { req ...

  8. eclipse安装和配置

    一.下载eclipse eclipse下载页 (选择"Eclipse IDE for Java EE Developers",适用于web和android开发) 我用的是luna的 ...

  9. python更新后yum问题

    How to switch between Python versions on Fedora Linux Currently, the default python version on Fedor ...

  10. APP开发+发布流程

    ios开发(证书+应用发布) 证书获取:http://newdocx.appcan.cn/newdocx/docx?type=1297_1291ios应用发布:http://newdocx.appca ...