React从入门到精通系列之(2)JSX的介绍

2、JSX的介绍

首先，请考虑下面的变量声明：

const element = <h1>hello world</h1>;

这个有趣的标签语法，由于它既不是字符串也不是HTML。

它被称为JSX，它是JavaScript的语法扩展。 咱们建议使用它和React一块儿使用，以便描述UI应该是什么样子的。JSX或许看上去像是一个模板语言，可是它具备JavaScript的所有能力。

JSX用来生成React元素。 咱们将在下一节中探讨将它们渲染到DOM。 下面，你能够找到JSX的基础知识。

JSX中的嵌入表达式

你能够经过将表达式包含在一个大括号里，以便用来在JSX中嵌入任何JavaScript表达式。
例如，下面代码中的 2 + 2，user.name，还有formatName(user)都是可用的表达式：

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

const user = {
    firstName: 'yatao',
    lastName: 'zhang'
};

const Element = (
    <h1>
        hello, {formatName(user)}
    </h1>
);

ReactDOM.render(
    Element,
    document.getElementById('root')
);

咱们将JSX拆分为多行以提升可读性。 虽然它不是强制性的要求，但当执行此操做时，咱们还建议将其括在括号中，以免自动分号插入而引发没必要要的bug。

JSX也是一个表达式

编译后，JSX表达式会成为常规JavaScript对象。
这意味着您能够在if语句和for循环中使用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>;

使用JSX指定子元素

若是标记为空，您可使用 /> 当即关闭它，例如html：

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

JSX标签也能够包含子元素：

const element = (
    <div>
        <h1>hello!</h1>
        <h2>Good to see you here.<h2>
    </div>
);

警告
因为JSX比HTML更接近JavaScript，React DOM使用驼峰命名法约定而不是HTML属性名称。
例如，class在JSX中变为className，tabindex变为tabIndex。

JSX防止注入攻击

在JSX中嵌入用户输入是安全的：

const title = response.potentiallyMaliciousInput;
// 要接收到的可能含有危险内容的字符串放入大括号中，这是比较安全的作法
const element = <h1>{title}</h1>;

默认状况下，React DOM在渲染它们以前转义嵌入在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()会进行一些检查，以帮助您编写无明显语法错误的代码，本质上，它建立的是一个像这样的对象：

// 提示：这是一个简单对象结构
const element = {
   type: 'h1',
   props: {
       className: 'greeting',
       children: 'hello, world'
   }
};

这些对象称为“React元素”。 你能够把它们想象成你想在屏幕上看到的样子。 React读取这些对象，并使用它们构形成为DOM元素同时一直保持其为最新的。