React学习之JSX语法讲解(一)

介绍JSX

什么是JSX？

const element = <h1>Hello,world!</h1>;

右边这种在javascript中出现的HTML语句就是JSX语法，JSX可以提供给你一个模板语言，快速开发前端UI组件，是javascript前端框架中的利器之一。

React通过JSX可以快速的渲染出DOM节点，现在我开始说说JSX语法必备的一些基础知识。

这里重重声明，所谓的JSX一定是以标签为开端，以标签为终结的语句即为JSX，在React编译这段JSX时，会将它处理为一个javascript对象。同时React的语法基本是基于ES6的，所以希望读者可以执行学习ES6的基础知识

1.在JSX中可以掺杂表达式

如何插入呢，我们需要将任何插入JSX语句中的表达式都用一个大括号包括起来。

而所谓的表达式即javascript中的表达式，比如:1+1,user.id,和func(a,b)等，综合为如下：

变量名
JSX语句表达式(也就是说JSX其实也是一种表达式)
自执行函数表达式(如果只是单纯的函数定义表达式也可以，只是没有运行结果)
函数调用表达式
属性访问表达式
算法，关系，逻辑,字符串表达式
三元运算表达式

实例如下:

const use = "abc";
const user = {
  firstName: 'tm7',lastName: 'jxy'
};
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const t1 = 1,t2 = 2;

const a = <div>{'abc'}</div>;
const a = <div>{use}</div>;
const b = <div>{user.firstName}</div>;
const c = <div>{formatName(user)}</div>;
const d = <div>{1+1+1}</div>;
const e = <div>{t1 && t2}</div>;
const f = <div>{t1 > t2}</div>;
const g = <div>{t1 < t2 ? 'abc':'ccc'}</div>;
const h = <div>{function(){return 'abc';}()}</div>;
const i = <div>{<div>iii</div>}</div>;

说得透彻点，在JSX中可以插入的就是函数调用，和我们的标识符，还有运算。

这里多说一句就是，如果存在多行JSX语句要写，我们可以进行如下处理

const a = (
    <div>
        <h1>a</h1>
    </div>
);

需要用小括号括起来。

补充：

我在之前就提了一下JSX语句也是一个对象，为什么这么说呢，很简单，大家可以console.log(<div>abc</div>)一下就知道，所以我们可以将JSX语句看成一个对象，对他进行使用，所以产生了如下扩展：

const k = <div>{(<div>hhh</div>).props.children}</div>;

非常有意思。

总的来说我们要将JSX看成一个对象，而不是一段HTML标签，只有看成对象才能合理的解释它为什么可以在javascript用，因为它就是一个javascript对象，这个对象由React.createElement()产生(这个函数后续会讲到)。

2.JSX语句是一个对象，是一个运用HTML标签结构却实现了javascript语法的对象，一句话，简直飞起

前面也非常明显的强调了JSX语句其本质就是一个javascript对象和表达式，最简单的例子证明就是如下：

function getGreeting(user) {
    if (user) {
        return <h1>Hello,{formatName(user)}!</h1>;
    }
    return <h1>Hello,Stranger.</h1>;
}

他可以在函数中直接返回，所谓返回值，返回值，即是返回值，那他一定是一个值，不是对象就是基本数据类型，还是谁!!!

这里想让大家深入一个观念，JSX不是HTML标签

那么问题来了，JSX竟然类似于HTML标签，那么它虽然不是HTML标签，但是是否拥有HTML标签的一些特性，它可以自定义属性吗，当然可以，但是这里需要注意一下几点：

一，对于一个HTML标签已经拥有的属性，JSX需要用驼峰命名法来处理，比如说tabindex必须写成tabIndex才能起作用，如下：

const el= <div tabIndex="0"></div>;

当然对于class会出问题，因为在ES6下可以用class来定义类了，这是要走java的节奏了，所以React规定你要用className这个属性来代替class出现在JSX中。

const el = <div className="0"></div>;//true
const el = <div class="0"></div>;//false

二，对于用户自定义的属性(肯定可以自定义啊，不然还玩毛啊),当然我们必须要加data-前缀，否则无效，不服，你可以试试以下例子，让你懵逼让你嗨：

const el = <div fff="abc"></div>;
const el = <div data-fff="abc"></div>;

三，对于属性的赋值会有限制

首先会有两种赋值方式，一种使用大括号(就是用我们的表达式赋值)，另一种是用双引号赋值，如下：

const el = <div className="abc"></div>;
const el = <div className={'abc'}></div>;

然而两者不可以混用，如果出现如下情况，React编译处理会将它当做一个字符串，而不是一个要插入JSX中的表达式：

const el = <div className="{'abc'}"></div>;

JSX除了可以进行属性赋值外，还可以拥有children，大家都懂啦，就是孩子节点，这个JSX对象中的props属性对象有一个属性children，就是指向它内部的孩子节点。

3.JSX语句的安全性

讲完了JSX和表达式混用啊，以及它的基本运用后，我们讲讲我们用JSX的好处:

很明显，让你在javascript中使用类似于HTML的语句可以装逼了，直截了当的好处
它可以有效的防止XSS注入
它可以用来快速的编写一个UI组件

等等…

第一点不用说，第三点以后说，我现在讲讲第二点

const title = "<script>alert('abc');<\/script>";
const element = <h1>{title}</h1>;

这个会输出title字符串，而不是html，原因无他，React在编译放在视图展示的时候会自动处理，进行编码，防止XSS注入。至于输出HTML的方法之后会讲

那么问题来了，咦，这里的script标签怎么加了双引号，我的天哪，why，因为JSX本来被一个script标签包裹，里面再来一个，肯定报错出问题(后续会将如何引用一个外部组件)

4.JSX语句写完后，编译到底干了啥

const el = (
  <h1 className="greeting">
    Hello,world!
  </h1>
);

对于上面这个JSX语句，我们的React编译处理会形成如下的对象:

const element = React.createElement(
  'h1',{className: 'greeting'},'Hello,world!'
);

每一个参数分别对应[标签名，属性，孩子节点]

这里需要注意了，在这里使用的自定义属性需要用单引号或者双引号括起来(ES6标准是尽可能是用单引号)。

然而有一个非常有趣的事情发生了，这个在我们前面处理属性的时候没有提起，就是我们即使没有用data-前缀，自定义属性都会加入我们的JSX对象中的props对象的属性中。

然而，只有data-作为前缀的属性才会出现在HTML标签中，运用这一点，我们可以用来存储一些我们需要但是不想显示在视图中的数据。

测试实例如下：

const el = React.createElement(
  'h1',{className: 'greeting','fff' : '----','data-kkk':'----'},world!'
);

说到第三个参数，大家就可以有很多变化了，孩子节点，这个节点可以是文本节点，如示例一样，也可以是JSX对象，如下：

const el = React.createElement(
  'h1',<div>----</div>
);

这里依旧记住JSX是个对象，深入骨髓。

上面的讲的createElement形成一个类似如下结构的对象(表示的是简化了的对象，具体的，大家可以console.log(obj)得到具体的属性)

const element = {
  props: {
     type: 'h1',className: 'greeting',children: 'Hello,world'//这里的children又可以是一个对象
  }
};

介绍JSX已经完了，下一篇会将React如何去处理DOM节点的。

这里提醒一下，对于页面中写JSX语法时，建议用type="text/babel"的script标签包裹，同时将Babel.js的文件包裹进来，Babel是用来处理浏览器环境不支持ES6的情况，将代码进行转换的。