React--JSX 简介

JSX定义

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

关于JSX需要记住就一个重点：
JSX是 React.createElement()的语法糖，JSX是一个JavaScript表达式

记住这点我们对JSX的语法理解起来就比较容易了。

JSX基本写法

const customElement = <h1>Hello, JSX</h1>

因为JSX是一个JavaScript 所以我们可以将这个语句赋值给一个变量，同理我们也可以把JSX语句作为一个函数返回值return出来

function createCustomElement() {
	return <h1>Hello, JSX</h1>
}

JSX嵌入表达式

const userInfo = {
	name: 'JSX',
	avatar: 'http://xxx.png'
}

cont UserInfoElement = (
	<div>
		<img src={userInfo.avatar} />
		<h1>{userInfo.name}</h1>
    </div>
)

JSX语法里用大括号包裹js表达式来渲染js表达式的值，双括号里面可以包含一切有效的js表达式，例如：1+1 getName(user) 三目运算，等一切有效的js表达式。当然，因为JSX也是js表达式所以同样可以包裹到双括号里面。

条件渲染

const userName = 'JSX';
const userNameElement = null;
if (userName) {
  	userNameElement = <h1>{userName}</h1>
} else {
	userNameElement = <h1>佚名</h1>
}

因为JSX是表达式，所以同样可以使用三目表达式或者逻辑取值来做条件渲染

const userNameElement = userName ? (<h1>{userName}</h1>) : (<h1>佚名</h1>);
const userNameElement = userName && (<h1>{userName}</h1>)

列表渲染

你可以通过使用 {} 在 JSX 内构建一个元素集合。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
<ul>{listItems}</ul>

列表渲染很简单就是{}中包含一个JSX元素数组来实现。

列表渲染的key

当我们运行这段代码，将会看到一个警告 a key should be provided for list items，意思是当你创建一个元素时，必须包括一个特殊的 key 属性。

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用数据中的 id 来作为元素的 key。
当元素没有确定 id 的时候，万不得已你可以使用元素索引 index 作为 key。
如果列表项目的顺序可能会变化，我们不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。可以看看 Robin Pokorny 的深度解析使用索引作为 key 的负面影响这一篇文章。如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值。

JSX的元素属性

你可以通过使用引号，来将属性值指定为字符串字面量：

const element = <a href="https://www.reactjs.org"> link </a>;

也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = <img src={user.avatarUrl}></img>;

然后属性名在JSX中为了更偏向javascript 所以采用的是camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定

例如： class–> className, tabindex --> tabIndex

JSX语法是React的基础，可以慢慢习惯JSX的写法，只需要理解JSX是React.createElement() 的语法糖，就能更好的接受JSX的功能实现。
在Babel编译的过程，会将JSX转译成一个名为 React.createElement() 函数调用。