React——JXS

关于JSX

   React中文文档原文说道：大多数React开发者使用了一种名为”JSX“的特殊语法，JSX可以让开发者更加轻松的书写这些结构 

• JSX是一种JavaScript的语法扩展，运用于React架构；元素是React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面
• 因为JXS语法上更接近JavaScript而不是HTML,故React DOM使用cameCass(小驼峰命名)来定义属性名称

const element1 = <div tabIndex="0"></div>
const element2=<img src={user.imgSrc}></img>

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

const title = response.potentialMailciousInput;
// 直接使用是安全的，会被Bable转译，会有效防止XSS攻击
const element = <h1>{title}</h1>

• JSX表示对象，Babel会把JSX转译为一个名为React.createElement（）函数调用，以下两种示例代码完全等效：

const element1 = <h1 className="say"> hello</h1>
const element2 = React.createElement(
	type: 'h1',
	props: {
		{className: 'say'},
		children: 'hello'
	}
)