React框架-JSX语法

---

前言

JSX是一个 JavaScript 的语法扩展，是javascript XML语法糖。官方建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

JSX 可以生成 React “元素”。

---

一、你如何理解JSX？

1、JSX是对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

//以下两种示例代码完全等效

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

const element = <h1 className="greeting">Hello, world!</h1>

2、JSX是变量

JSX 标签里能够包含很多子元素

const element1 = <h1 className="greeting">Hello, world!</h1>

const eleChild = <div>
					<h3>child</h3>
				 </div>

const ele = <div>
				<h1>hello react</h1>
				<h1>hello</h1>
				{ eleChild }
			</div>

3、JSX可以嵌套

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。
在下面的例子中，声明了一个名为 num 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：

const col = "col"
const title = "hello react"
const num = 200

function createDom(arg){
	arg = arg || 0
	return (
		<div>
			<h2 className={col} title={title}>{num + arg}</h2>
		</div>
	)
}

const res = createDom(123)

4、jsx可以防注入攻击

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

const title = xxx.xxxxxxxx
// 直接使用是安全的
const ele = <h1>{ title }</h1>

二、JSX注释方式

1、单行注释

{/*这是我的注释*/}

2、多行注释

{/*
	<h1>hello react</h1>
	<h1>hello</h1>
*/}