[译]React核心概念1：JSX简介

原文连接：reactjs.org/docs/introd…

引言

首先咱们先来看下下面这个变量的声明

const element=<h1>Hello World!</h1>
复制代码

这个有趣的语法既不是一个字符串也不是一个HTML标签。

这种语法被称为JSX，是Javascript的一种扩展语法。咱们推荐在React中使用JSX去编写咱们的UI界面。也许你会以为JSX很像是模板语言，可是它具备JavaScript的所有功能。

JSX建立了React的元素，在下一节咱们会探讨如何将JSX渲染到真是DOM上。接下来，你将学到关于JSX的基础知识。

为何要使用JSX

React信奉渲染逻辑与UI逻辑是自然耦合的：如何处理事件，状态如何随着时间变化以及数据如何显示在页面上。React用被称为“组件”的松散的耦合单元（同时包含标签代码与逻辑代码）来代替手动地将标签与代码逻辑分散在不懂的文件里。咱们将会在接下来的介绍里介绍组件。

React不强制要求使用JSX，可是大部分开发者在开发时发现将UI标签放在JavaScript代码里对观察代码渲染十分有帮助。固然，使用JSX能在开发时向开发者显示更多游泳的错误和警告信息。

在JSX嵌入表达式

在下面的例子里，咱们声明了一个name变量而且在JSX中经过一个花括号引用了它。

var name="于一";
var greeting=<h1>Hello {name}</h1>;

ReactDom.render(
    greeting,
    document.getElementById('root')
);
复制代码

你能够在JSX中经过花括号引用任何有效的JavaScript表达式。好比2+2，user.firstName或formatName(user)，以上这些都是有效的JavaScript表达式。

在下面的例子里，咱们在<h1>标签里引用了一个JavaScript函数formatName(user)。

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'YUYI',
    lastName: 'WU'
};

const element = (
    <h1>
        Hello,{formatNameuser}!
    </h1>
)

ReactDom.render(
    element,
    document.getElementById('root')
);
复制代码

为了便于阅读，咱们把JSX分红了几行，你在编写代码时能够不这样作。一样咱们推荐在使用JSX时将他们包裹在圆括号内以防止编译时被自动插入分号。

JSX也是表达式

在编译以后，JSX表达式就变成了常规的JavaScript的函数调用而且等价于一个JavaScript对象。

这也就意味着你能够在if语句和for循环中使用JSX，你也能够把JSX赋值给变量或者做为一个参数传入函数中，或者把它做为一个函数的返回值。

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表达式做为属性时千万不要把他包裹在引号内，在属性中你只能使用引号和花括号其中的一个，不能两个同时使用（不信能够动手试试）。

注意： 因为JSX相比于HTML更接近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 tilte=response.pontentiallyMaliciousInput;
const element=<h1>{title}</h1>;
复制代码

默认地，ReactDOM在渲染以前，会将嵌入到JSX的任何值进行转义。所以这可以确保你没法经过非显式声明的方式来注入任何值。全部的值在被渲染以前都会被转换成字符串形式，因此它可以避免XSS攻击。

JSX实际上是对象

Babel会把JSX编译成对React.createElement()的调用。

下面两个例子是等价的：

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

const element=React.createElement(
    'h1',
    {className:'greeting'},
    'Hello, world!'
);
复制代码

React.createElement()会检查你的代码，减小bug的出现，但本质上它会将你写的JSX编译成下面这样的一个对象：

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world!'
    }
};
复制代码

这些对象被称为“React元素”，你能够把它想象成是对你想要编写的页面的描述。React经过使用它们来建立DOM并实时更新。

提示： 咱们推荐在你的编译器中使用“Babel”语言定义，来显示高亮的ES6和JSX代码。