您的位置：首页 > Web前端 > React

<React: Up and Running>阅读笔记 — JSX

2015-11-08 18:26 531 查看

Transpiling JSX

transpilation是获取source code，然后使用老版本浏览器可以理解的JavaScript来重写的过程，这两个版本之间的语法不一样，但是功能是一样的。

这个JavaScript的polyfills是不一样的，polyfill是完全JavaScript-land的，比如解决JavaScript新老版本API兼容的问题，把高版本的API通过polyfill使低版本也能使用。但是当有新的语法引入时，比如新版本JavaScript中出现的class关键字，这个是无法通过polyfill进行兼容的。因此在把要想在browser上面使用这些新语法，必须先对source code进行compilation(transpilation)，通过这种方式我们就可以直接使用很多ES6的新特性。

Client-side

在浏览器中进行transpilation是最简单的实现方式，但是这个会给用户带来性能方面的不利影响，因此对真实用户来说，不推荐使用这种方式，而是推荐在服务器进行编译。但是这种方式对我们日常开发来说却是非常有利的，不需要设置一大堆的编译步骤。

要在Client-side使用JSX，需要做两件事：1) 包含client JSX transpilation script 2) 使用JSX来标记scripts脚本

在老版本的React中，使用的JSX build脚本是JSXTransformer，新版本使用的是babel(v0.14)。两者使用的方式和语法是基本上来说差异不大，babel除了支持JSX之外，还支持最新的JavaScript版本的各种特性到低版本的JavaScript中。

如果没有JSX build脚本的情况下，在浏览器中包含JSX语法会直接报错的。添加build脚本之后，build脚本会查找并transiles代码中tag类型为”text/jsx”的中的script，将其中的语法从JSX变为正常的JavaScript语法，然后把转换后的JavaScript代码auto-insert到document的<head>中。例如下图这样，可以看出，生成的script同时还包含一个对debug非常有帮助的source map(a
mapping of before/after the transformation)。

在上面的例子中是直接使用inline scripts，我们同时还可以使用external scripts，原理和用法跟上面的过程是一样的，例如下面：

但external scripts和inline scripts有一点不同的是，这种方式必须保证代码是部署在一个HTTP服务器上面的，因为build脚本需要使用XMLHttpRequest来下载这些external scripts，然后才能进行transform，而XMLHttpRequest的使用是受到浏览器的same-origin规则限制的。

JSX transformation

JSX transform 是非常轻量级和简单的，它甚至保留了错误发生的line number，可以通过这个来回溯JSX中的错误根源。babel官方提供的有一个JSX语法转换器：https://babeljs.io/repl/，支持在线从JSX语法转换为React的JavaScript方法调用代码。

还有一个非常有用的在线转换工具：https://facebook.github.io/react/html-jsx.html，在线支持将HTML标签语言转换为JSX语法。

JavaScript in JSX

当我们在构建UI的时候，我们经常需要用到 variables/conditions/loops，我们不需要再去学习另外一门模板语言来处理这个问题，JSX允许我们在JSX内部使用JavaScript语言。只需要把JavaScript代码包含在一个花括号{}内部即可。这个跟一些模板引擎的处理是类似的，如果你之前学过模板的概念的话，就会非常容易理解这个的，JSX相对于那些很啰嗦的模板引擎而言是非常简单的。

当我们在JSX中使用相连的 {} blocks 时，JSX在处理时会把它们分别放在标签中来区分它们。例如 <th>{1}{2}</th>，最终在DOM中渲染的时候，会变成 <th>12</th>。

Whitespace in JSX

JSX中的空白跟HTML是类似的，但是又不完全一样。

例子1：

JSX处理之后的样式为：

多个spaces最终会合并为一个，所以最终的渲染结果是“1 plus 2 is 3”

例子2：

JSX处理之后的样式为：

最终的渲染结果是“1plus2is3”

在标签内使用whitespace跟HTML是类似的，有一种解决方式是，在JSX中通过插入JavaScript表达式的方式来添加空格。例如下面两种方式均可：

Comments in JSX

参考官方文档的阅读笔记

HTML entities

参考官方文档的阅读笔记

Anti-XSS

参考官方文档的阅读笔记

Spread attributes

参考官方文档的阅读笔记，大部分概念是相同的，里面提到一种很有意思的用法，Parent-to-child spread attributes，即使用parent component的props来给child component传递属性。例如：

可以直接用这些props传递给a标签做属性：

Returning multiple nodes in JSX

在component的render()函数中，我们只能返回一个single node的component，对于multiple nodes，我们可以把它wrap到一个component中再返回。比如下面这里返回多个span的问题：

尽管我们在render( ) 函数中不能返回一个nodes array，但是我们是可以在composition的过程中使用arrays的。只要这个array中的nodes有正常的key属性，同时有一种例外不需要设置key属性，我们可以在这个nodes array中插入whitespace或者strings。例如：