介绍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标签，那么它虽然不是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的好处:
等等…
第一点不用说，第三点以后说，我现在讲讲第二点
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的情况，将代码进行转换的。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
