React基础篇 - 02.JSX 简介

JSX 简介

请观察下面的变量声明:

const element = <h1>Hello, world!</h1>;

这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML。

它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言,但事实上它完全是在 JavaScript 内部实现的。

JSX 用来声明 React 当中的元素。在下一个章节里面我们会详细介绍元素是如何被渲染出来的,接下来呢,我们先来看看 JSX 的基本使用方法。

在 JSX 中使用表达式

你可以任意地在 JSX 当中使用 JavaScript 表达式,方法是,将表达式包含在大括号 {} 里。

例如 2 + 2, user.firstName, 以及 formatName(user) 都是有效的表达式。

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

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

在 CodePen 上试试。

我们书写 JSX 的时候一般都会带上换行和缩进,这样可以增强代码的可读性。与此同时,我们同样推荐在 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>;

使用大括号包裹的 JavaScript 表达式时,不要再外面使用引号。否则,JSX 会将引号当中的内容识别为字符串而不是表达式。

JSX 嵌套

如果 JSX 标签是闭合式的,那么你需要在结尾处用 /> ,就好像 XML 一样:

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

JSX 标签可以有子标签:

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

警告: 因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称。 例如,class 变成了 className,而 tabindex 则对应着 tabIndex.

JSX 防注入攻击

你可以放心地在 JSX 当中使用用户输入:

const title = response.potentiallyMaliciousInput;
// 这是安全的:
const element = <h1>{title}</h1>;

默认情况下,React DOM 在渲染前会 转义 嵌入在 JSX 中的任何值。因此,可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

JSX 代表 Objects

Babel 解释器会把 JSX 转换成一个名为 React.createElement() 的方法去调用。

下面两段代码的作用其实是相同的:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 这个方法首先会执行一些检查,以帮助您编写无错误的代码,之后会返回一个类似下面的对象:

// 注意: 以下示例是简化过的(不代表在 React 源码中是这样)
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

这样的对象被称为 “React 元素”。你可以将其视为你想要在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

我们将在下一个章节当中介绍更多有关 React 元素 是如何渲染成 DOM 的内容。

**Tip:** 如果你是在使用本地编辑器编写 JSX 代码的话,推荐你去装一个支持 JSX 高亮的插件,这样更方便之后的开发学习。

小结

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX,但它有以下优点:

  • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
  • 它是类型安全的,在编译过程中就能发现错误,并且防注入攻击。
  • 使用 JSX 编写模板更加简单快速。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

Preact 源码解析系列一 :简单DOM渲染

用过Preact的人都知道,在每个JS文件之前,都需要写 /** @jsx h */,那这句话是什么作用呢? 先从JSX说起。 解析与编译 JSX实际上就是一个...

2466
来自专栏用户3211691的专栏

2、React组件的生命周期

  - 因为在ES6语法下,类的每个成员函数在执行时的this并不是和类实例自动绑定的;   - 而在构造函数中this就是当前组件实例,所以,为了方便将来调...

762
来自专栏向治洪

React 之props属性

React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。 可以使用 JSX ...

2075
来自专栏林冠宏的技术文章

如何用 js 获取table 或者其他块状标签的 宽和高

这个比较简单,总体思想,标签标记一个id,js获取id,就能用它的属性了。介绍两种方法。请看下面代码。 第一种 1 <script> 2 3 fu...

2259
来自专栏CRPER折腾记

React 折腾记 - (8) 基于React+Antd封装选择单个文章分类(从构建到获取)

一般自己写,肯定优先考虑数组对象格式[{tagName:'a',value:1}];

814
来自专栏GIS讲堂

OpenLayers3基础教程——OL3之Popup

本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay代替OL2的Popup功能。

1065
来自专栏谦谦君子修罗刀

RN生命周期-陪你到繁花落尽

有些事情,由天注定,从出生开始,到死亡结束。一个转身就是沧海桑田。 有些代码,由你书写,从出生开始,到死亡结束。一次擦肩就是bug满天飞~ ok,你以为我还是...

29510
来自专栏mukekeheart的iOS之旅

iOS学习——iOS开发小知识点集合

  在iOS学习和开发过程中,经常会遇到一些很小的知识点和问题,一两句话就可以解释清楚了,这样的知识点写一篇随笔又没有必要,但是又想mark一下,以备不时之需,...

36410
来自专栏xingoo, 一个梦想做发明家的程序员

希尔排序

希尔排序的时间复杂度,最好的情况下仍然是正序时,可达到O(n),平均复杂度为O(nlogn)。 算法思想: 采用跳跃式处理数组,使得数组粗粒度的实现基本有序。...

2005
来自专栏互联网杂技

js事件

1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body...

35311

扫码关注云+社区