JSX
什么是JSX
const element = <div>hello,world</div>上面代码，像是JavaScript，也像是html，这就是jsx，一种JavaScript的语法扩展，在React中使用JSX来描述用户界面。JSX是在JavaScript内部实现的
为什么使用JSX
如果要在js里写HTML，就是创造一个一个的DOM对象，用js来写，会非常的冗余，并且不能一目了然的看清楚DOM的解构。所以就扩展成了jsx，直接用HTML的写法在
js中写DOM。
JSX的特点
- JSX可以很好地描述UI：
const element=<h1>hello,world</h1> - React中认为渲染逻辑本质上和UI逻辑天然耦合，并没有人为地将标记与逻辑分类到不同文件，而是将他们放在组件这种松散松散耦合单元中，实现关注点分离
- JSX本身也是表达式，可以在{}中使用任意Javascript功能。在进行编译后，JSX会被转换成普通的JavaScript函数调用，并对其取值后得到JavaScript对象
JSX可以防止注入攻击，ReactDOM在渲染所有输入内容前，默认会进行转译
使用JSX
const Index = () => {
return <div>Hello React!</div>
}
ReactDOM.render(<Index />,document.getElementById('index'));
在JSX中嵌入表达式
可以用花括号把任意的JavaScript表达式嵌入到JSX中
const txt = "hello,react"
const Index = () => {
return <div>{(function(a,b){return a+b})(1,2)}</div>
}
ReactDOM.render(<Index />,document.getElementById('index'));用JSX指定属性值
可以用双引号来指定字符串字面量作为属性值
const element = <div tabIndex="0"></div>可以用花括号嵌入一个JavaScript表达式作为属性值
const element = <img src={user.avatarUrl}></img>注：在属性中嵌入JavaScript表达式时，不要使用引号将花括号括起来。您应该使用引号(用于字符串)或大括号(用于表达式)，但不能同事使用同一个属性。
犹豫JSX比HTML更接近JavaScript，因此ReactDOM使用camelCase属性名约定而不是HTML属性名称tabindex变成tabIndex class变成className
用JSX指定子元素
如果是空标签，应该像XML一样，使用\>立即闭合它
const element = <img src={user.avatarUrl} />;JSX标签可能包含子元素
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);JSX防止注入攻击
在JSX中嵌入用户输入是安全的
const title = response.potentiallyMaliciousInput;
// 这样是安全的:
const element = <h1>{title}</h1>;默认情况下，在渲染之前，React DOM会格式化(escapes)JSX中的所有制。从而保证用户无法注入任何应用之外的代码。在被渲染之前，所有的数据都被转译成为了字符串处理
以避免XSS(跨站脚本)攻击
JXS表示对象
Babel将JSX变异成React.createElement()调用
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);等同于
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);React.createElement()汇之星一些检查来帮助你编写没有bug的代码，但基本上它会创建一个如下所示的对象:
// 注意: 这是简化的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};这些对象被称作"React元素"。你可以把他们想象成为你想在屏幕上显示的内容的一种描述。React会读取这些对象，用他们来构建DOM，并且保持他们的不断更新
原文：https://www.cnblogs.com/dehenliu/p/12523348.html