思考一下这样一种变量声明:
const element = <h1>Hello, world!</h1>;
这个有趣的标签语法既不是字符串也不是HTML，它被称为JSX，是一种对于JavaScript扩展的语法。我们推荐在React中使用它来描述UI应该是什么样子。JSX也许会让你想起模板语言，但是它完全是JavaScript。
JSX创造了React '元素'。我们将会在下一个章节中探讨如何将它渲染到DOM中。接下来，你将学习到JSX的基础部分。
为什么要使用JSX？
React包含这样一个事实，它的渲染逻辑被天生地加在了UI逻辑上：事件如何被处理，状态随时间如何变换，数据如何去为了展示做准备。
取代了通过把标记和逻辑单独地放在不同的文件的方式，React的分离只关注包含了二者的松散的几个被称为组件的单元(期待更好的翻译React speratates conserns with loosely coupled units called “components” that contain both.)。我们将会在未来的章节讲解组件，但是如果把标记放在js中让你觉得不适，这个YouTube上的视频也许会让你觉得信服。(https://www.youtube.com/watch?v=x7cQ3mrcKaY)
对于React而言JSX不是必须的，但是大多数人觉得在js代码中编写UI时它会提供一种视觉上的辅助。同时它也允许React展示更多有用的错误和警告信息。
下面让我们一起开始学习吧!
在JSX中插入表达式
你可以在JSX中通过大括号包裹的形式插入任何javaScript表达式。
例如：2 + 2, user.firstName, 和 formatName(user)等都是有效的表达式。
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
我们把JSX分割成多行的形式进行书写。然而这并不是必要的，当这么做的时候，我们也推荐把它用圆括号包裹起来去避免换行自动添加分号的问题。
JSX也是一个表达式
在编译之后，JSX表达式变为一个常规的JavaScript函数调用，并且返回一个JavaScript对象。
这意味着你可以在JSX中使用if语句，for循环，把它传递给一个变量，把它当作参数进行接收，从函数中将它返回。
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
使用JSX指定属性
你可以使用双引号去指定字符字面量作为属性。
const element = <div tabIndex="0"></div>;
你也可以使用大括号在属性中插入一个JavaScript表达式
const element = <img src={user.avatarUrl}></img>;
当在属性中插入JavaScript表达式时，不要把引号放在大括号周围。你要么使用双引号(对于字符串)，要么使用大括号(对于JavaScript表达式)，但是不要再一个属性中同时使用二者。
警告：
由于相对于HTML来说，JSX更接近于JavaScript, ReactDOM使用驼峰标识的属性命名习惯代替HTML属性名。
例如：在JSX中class变为className，tabindex变为tabIndex
用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;
// This is safe:
const element = <h1>{title}</h1>;
默认的，ReactDOM会隔离任何插入进JSX中的值，在渲染它们之前。因此它确保了你无法注入任何东西，如果这些东西没有在你的应用中明确的写着。任何东西在渲染之前都会被转变为字符串，这将会帮助阻止跨站脚本攻击。
JSX代表对象
Babel把JSX编译为React.createElement()调用:
以下两个例子是等价的：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement()做了一些检测来帮助你写的代码减少出现错误，但是本质上他会创建一个如下所示的对象：
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
这些对象被称为React元素。你可以把它们想象为你期待在屏幕上看到什么的一种描述。React读取这些对象，并且使用这些对象去构建DOM，保持实时更新。
我们将会在下一章节中探讨如何把React元素渲染到DOM中。
网友评论