专栏首页向治洪深入理解 JSX

深入理解 JSX

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。

为什么要使用 JSX?

你不需要为了 React 使用 JSX,可以直接使用纯粹的 JS。但我们更建议使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。

对于非专职开发者(比如设计师)同样比较熟悉。

XML 有固定的标签开启和闭合。这能让复杂的树更易于阅读,优于方法调用和对象字面量的形式。

它没有修改 JavaScript 语义。

HTML标签 与 React组件 对比

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

注意: 由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。

转换

JSX 把类 XML 的语法转成纯粹 JavaScript,XML 元素、属性和子节点被转换成React.createElement 的参数。

var Nav;
// 输入 (JSX):
var app = <Nav color="blue" />;
// 输出 (JS):
var app = React.createElement(Nav, {color:"blue"});

注意,要想使用 <Nav />Nav 变量一定要在作用区间内。

JSX 也支持使用 XML 语法定义子结点:

var Nav, Profile;
// 输入 (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 输出 (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

使用 JSX 编译器 来试用 JSX 并理解它是如何转换到原生 JavaScript,还有 HTML 到 JSX 转换器 来把现有 HTML 转成 JSX。

如果你要使用 JSX,这篇 新手入门 教程来教你如何搭建环境。

注意: JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过React.createElement 里的校验代码。

JavaScript 表达式

属性表达式

要使用 JavaScript 表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 ("")。

// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出 (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

子节点表达式

同样地,JavaScript 表达式可用于描述子结点:

// 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 输出 (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

注释

JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。

var content = (
  <Nav>
    {/* 一般注释, 用 {} 包围 */}
    <Person
      /* 多
         行
         注释 */
      name={window.isLoggedIn ? window.name : ''} // 行尾注释
    />
  </Nav>
);

注意: JSX 类似于 HTML,但不完全一样。参考 JSX 陷阱 了解主要不同。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React语法基础之JSX

    概述 React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 JSX是什么 JSX是Rea...

    xiangzhihong
  • Flexbox布局指南

    Flexbox布局概念 Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来...

    xiangzhihong
  • android View层的绘制流程

    还记得前面《Android应用setContentView与LayoutInflater加载解析机制源码分析》这篇文章吗?我们有分析到Activity中界面加...

    xiangzhihong
  • React学习笔记之JSX

    JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的代码:

    IMWeb前端团队
  • React学习笔记之JSX

    什么是JSX? JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的...

    IMWeb前端团队
  • Javascript+CSS实现影像卷帘效果

    用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻,想把它搬到自己的WebGIS系统中去,抱着同样的想法,我也对这种比较炫的卷帘效果做了一...

    lzugis
  • 我为什么不再用 Vue,而改用 React?

    当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化...

    逆锋起笔
  • 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并...

    前朝楚水
  • 前端新趋势

    快速回顾,也就意味着篇幅精悍,重点突出,也就可能难免有不当和错误之处,如果有,敬请指正和留言讨论。 知识之旅开始:

    grain先森
  • 从React和angular看技术路线的分歧

    无论ReactJs还是其它什么,我们在看的时候都要看它们的思路、方面,而不要一开始时就扎进它的代码细节中。。。 最近在看一些reactJs的资料,有一些收获,写...

    web前端教室

扫码关注云+社区

领取腾讯云代金券