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 条评论
登录 后参与评论

相关文章

来自专栏腾讯IVWEB团队的专栏

React Transition Group 动画原理

本文从React的源码分析到过渡实现原理,每个步骤都进行了详细讲解,React Transition Group 动画的实现方法就是大体如此,希望对各位小伙伴有...

2.6K2
来自专栏Java Edge

深入了解React.js的JSX1 JSX 与HTML2 JSX 和HTML 的不同之处

1725
来自专栏阿杜的世界

【译】Java 8的新特性—终极版1. 简介2. Java语言的新特性3. Java编译器的新特性4. Java官方库的新特性5. 新的Java工具6. JVM的新特性7. 结论8. 参考资料

前言: Java 8 已经发布很久了,很多报道表明Java 8 是一次重大的版本升级。在Java Code Geeks上已经有很多介绍Java 8新特性的文章,...

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

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

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

27810
来自专栏陈纪庚

vue.js响应式原理解析与实现—实现v-model与{{}}指令

上一节我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo。今天,我们就...

731
来自专栏前端儿

编写高质量 JavaScript -- 知识点小记

此番改善之后,匿名function里面的变量作用域不再是window,而是局限在函数内。

1661
来自专栏社区的朋友们

Unity 游戏的 String interning 优化

通常情况下,我们难以注意到运行着的 Unity 程序内 String 的实例化情况。这些字符串的创建,销毁的时机是否合理,是否存在有重复 ,冗余 ,低效 以及泄...

1010
来自专栏向治洪

React 之props属性

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

1885
来自专栏java学习

面试题61(关于继承多态的理解)

面试题61 2018年1月21日 ? 本期题目 (单选题)下列选项中哪一个是正确的? package Wangyi; class Base{ publi...

2755
来自专栏林德熙的博客

WPF 开发

如果使用NamedPipeServerStream、Mutex做单实例,需要传入字符串,这时如果传入一个固定的字符串,会在多用户的时候无法使用。

511

扫码关注云+社区