作者：卓越开发者联盟 (League of Extraordinary Developers)

出版社：电子工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

React(第2版)：引领未来的用户界面开发框架试读：

前言

React是什么，为什么要使用它

React是Facebook内部的一个JavaScript类库，已于2013年开源，可用于创建web用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动更新DOM、费力地记录每一个状态的日子一去不复返了——这种老旧的方式既不具备扩展性，又很难加入新的功能，就算可以，也是冒着很大的风险。React使用很新颖的方式解决了这些问题。你只需声明式地定义各个时间点的用户界面，而无须关心在数据变化时需要更新哪一部分DOM。在任何时间点，React都能够以最小的DOM修改来更新整个应用程序。

本书内容

React引入了一些激动人心的新概念，向现有的一些最佳实践发起了挑战。本书将会带领你学习这些概念，帮助你理解它们的优势，创建具备高扩展性的单页面应用（SPA）。

React把主要的注意力放在了应用的“视图”部分，没有限定与服务端交互和代码组织的方式。在本书中，我们将介绍目前的一些最佳实践及配套工具，帮助你使用React构建一个完整的应用。

本书面向的读者

为了更好地掌握本书的内容，你需要有JavaScript和HTML相关开发经验。倘若你做过SPA应用（什么框架不重要，Backbone.js、Angular.js或者Ember.js都可以）那更好，但这不是必需的。

源码和示例

一些来自Reddit克隆示例项目的代码片段会贯穿在整本书中。你可以在http://git.io/vlcpa浏览完整的代码，到http://git.io/vlCUI可以看到在线的demo。

编写过程

我们把本书当作一本虚拟的电子书编写，用一到两个月的时间快速迭代。这种方式有助于创建新鲜及时的内容，而传统书籍往往无法覆盖最新的趋势和技术。

这是本书的第2版，所有的示例代码都更新到了React 0.14版，而且有了一个新的示例项目。

作者

本书由一个团队编写而成，这个团队的成员都是一些经验丰富且专注于JavaScript的开发者。

Richard Feldman是旧金山教育科技公司NoRedInk的前端工程师。他是一个函数式编程爱好者，会议发言人，还是seamless-immutable的作者。seamless-immutable是一个开源类库，可以提供不可变的数据结构，向后兼容普通的JavaScript对象和数组。Richard在Twitter和Github上都叫@rtfeldman。

Frankie Bagnardi是一位高级前端工程师，为多种不同的客户端创造用户体验。在业余时间里，他会在StackOverflow（FakeRainBrigand）和IRC（GreenJello）上回答问题，或者开发一些小项目。可以通过f.bagnardi@gmail.com联系他。

Simon Højberg是一个高级UI工程师，在罗德岛普罗维登斯市的Swipely公司工作。他是普罗维登斯市线下JS见面会的核心组织者，之前还是波士顿创业学院的JavaScript讲师。他一直在使用JavaScript开发功能性的用户界面，也会开发一些像cssarrowplease.com这样的业余项目。Simon的Twitter是@shojberg。

Jeremiah Hall现在OpenGov Inc任职高级软件工程师/架构师，他还是Aspect Apps的创始人，该应用使用React Native和JavaScript来构建一个日志应用的UI。在Twitter可以通过@jeremiahrhall找到他。第1章React简介背景介绍

在Web开发的早期，前端代码量不大，也不够强大。得益于近几年来浏览器厂商之间你追我赶式的竞争，JavaScript的性能得到了极大的提升，现如今web应用能够提供的用户体验可以与原生应用比肩。随着web应用的不断丰富和生机勃勃的发展，JavaScript在可扩展和高性能方面提出了前所未有的挑战。

从历史上看，很多JavaScript类库会把性能或者代码架构放在第一的位置——提供简单的方式可以高效地操作DOM，或者提供架构模式使得代码更容易扩展。React一飞冲天，不但实现了高性能，还保证了代码的扩展性。这种强有力的组合使得它跃居为Github前十大流行的类库！

React发源自Facebook的PHP框架XHP的一个分支。XHP作为一个PHP框架，旨在每次有请求进来时渲染整个页面。React的产生就是为了把这种重新渲染整个页面的PHP式工作流带到客户端应用中来。

React本质上是一个“状态机”，可以帮助管理复杂的随着时间而变化的状态。它以一个精简的模型实现了这一点。React只关心两件事：1. 更新DOM2. 响应事件

React不处理Ajax、路由和数据存储，也不规定数据组织的方式。它不是一个Model-View-Controller框架。如果非要问它是什么，它就是MVC里的“V”。React的精简允许你将它集成到各种各样的系统中。事实上，它已经在数个MVC框架中被用来渲染视图了。

在每次状态改变时，使用JavaScript重新渲染整个页面会异常慢，这应该归咎于读取和更新DOM的性能问题。React运用一个虚拟的DOM实现了一个非常强大的渲染系统，在React中对DOM只更新不读取。

React就像高性能的3D游戏引擎，以渲染函数为基础。这些函数读入当前的状态，将其转换为目标页面上的一个虚拟表现。只要React被告知状态有变化，它就会重新运行这些函数，计算出页面的一个新的虚拟表现，接着自动地把结果转换成必要的DOM更新来反映新的表现。

乍一看，这种方式应该比通常的JavaScript方案——按需更新每一个元素——要慢，但React确实是这么做的：它使用了非常高效的算法，计算出虚拟页面当前版本和新版间的差异，基于这些差异对DOM进行必要的最少更新。

React赢就赢在最小化了重绘，并避免了不必要的DOM操作，这两点都是公认的性能瓶颈。

用户界面越复杂，就越容易发生这样的情况——一个用户交互触发一个更新，而这个更新触发另外一个更新，一个接一个。如果没有恰当地把这些更新放到一起，性能就会大幅度降低。更糟糕的是，有时候DOM元素在达到最终状态前，会被更新好多次。

React的虚拟表示差异算法，不但能够把这些问题的影响降到最低（通过在单个周期内进行最小的更新），还能简化应用的维护成本。当用户输入或者有其他更新导致状态改变时，我们只要简单地通知React状态改变了，它就能自动化地处理剩下的事情。我们无须深入到详细的过程之中。

React在整个应用中只使用单个事件处理器，并且会把所有的事件委托到这个处理器上。这一点也提升了React的性能，因为如果有很多事件处理器也会导致性能问题。访问http://git.io/vlcpa，可以阅读到示例项目的全部源码，这个项目将贯穿在本书的内容中。本书概览

本书将分四个大块进行讲述，帮助你在开发时充分发挥React的优势。Component的创建和复合

本书的前7章都与React组件的创建和复合相关。这些章节将帮助你搞清楚如何使用React。

1）React简介

React介绍，包括背景介绍及全书概览。

2）JSX的使用和React组件的基础用法

JSX（JavaScript XML）提供了一种在JavaScript中编写声明式的XML的方法。这一章将学习如何在React中使用JSX，学习如何构建简单的React Component。虽然对React来说JSX不是必需的，但因为这是一种推荐的用法，因此本书的大部分例子，包括示例项目，都会使用JSX。

3）Component的生命周期

在渲染过程中，React会频繁地创建或者销毁组件。React提供了很多可被注入到组件生命周期中的钩子函数。你需要了解并理解如何管理组件的生命周期，避免在应用中产生内存泄漏。

4）数据流

在React中，数据是如何在组件树中从上向下传递的？哪些数据可以修改？搞清楚这些问题是非常重要的。React的props和state有明确的区别。这一章将学习props和state是什么，以及怎样在应用中正确地使用它们。

5）事件处理

React的事件处理采用声明的方式。对于交互式的界面，事件处理是非常重要的一部分，也是必须学习并掌握的。还好React提供的事件处理方案非常简单。

6）Component的复合

React鼓励创建小巧且有明确功能的组件来处理特定需求，再在应用中创建复合层来组合使用这些组件。这一章将学习如何在其他组件中使用已有的组件。

7）高阶组件和Mixin

这是一种模式，对数据依赖的一种抽象。高阶组件将普通组件包裹起来，通过props来提供数据或者函数。本章还会介绍mixin，在特定情况下它依然适用。进阶

一旦掌握了React的基础，就可以继续学习一些高级的主题。接下来的6章有助于进一步打磨React技巧，搞清楚如何创建优秀的React组件。

8）DOM操作

尽管React提供了基于虚拟DOM的各种功能，有时候你还是需要访问应用程序中原生的DOM节点。这样就可以利用现有的一些JavaScript类库，或者可以更加自由地控制你的组件。本章将告诉你在React组件生命周期的哪些节点上可以安全地访问DOM，在什么时候应该释放对DOM的控制，避免内存泄漏。

9）使用React创建表单

接收用户输入的最佳方式之一就是使用HTML表单。但有一个问题，HTML表单是有状态的。React提供了一种方案，可以把大部分状态从表单移入到React组件中。这为我们提供了对表单元素的不可思议的控制力。

10）动画

作为Web开发者，我们手里已经有了一个声明式且性能强劲的动画工具：CSS。React鼓励使用CSS实现动画。本章介绍在React中如何利用CSS给组件添加动画。

11）组件性能优化

React的虚拟DOM虽然创造性地提升了性能，但是性能还有继续提升的空间。React提供了这样一种方式，即当你知道组件没有变化时，可以告诉渲染器无须重新渲染你的组件。通过这种方法可以大幅度地提高应用的速度。

12）服务端渲染

很多应用都要求进行SEO，恰好React可以像Node.js那样在非浏览器环境中渲染。服务端渲染还可以提升应用首页的加载速度。编写同时支持服务端和客户端渲染的应用可能有些困难，本章将提供一些同构渲染的策略，指出在做服务端渲染时，你将碰到哪些具有挑战的关注点。React工具

React有很多很棒的开发工具和测试框架。学会使用这些工具有助于你编写出更健壮的程序。这部分将分成工具和测试两章进行介绍。

13）开发工具

React应用变大后，不但需要某种方式自动打包代码进行开发，而且调试程序也变得更加困难。在本章中，你将了解有哪些工具可以用来构建和打包React应用，学习如何使用Google Chrome Plugin来可视化你的React组件，简化调试。

14）React测试

随着应用逐渐变大，为了确保不向已有的可用代码中引入新的问题，编写测试是重要的一部分。因为测试鼓励编写模块化的代码，所以有助于写出更好的代码。本章将学习如何全面地测试React组件。React实践

最后两章介绍使用React时要注意哪些方面，以及其他可能没有想到的使用场景。

15）架构模式

React只提供了“MVC”里面的“V”，但是它非常灵活，可以作为其他框架或者系统的插件使用。本章将学习使用React来设计更大规模的应用。我们还会探索示例中React项目的架构，学习这种架构是如何管理项目不断膨胀所带来的复杂度的。

16）不可变性

React可以完美结合不可变数据结构——这种数据结构一旦实例化以后就不再改变。在本章中将会介绍使用不可变数据的优势和不足，并介绍三个类库，可以将不可变数据结构引入到你的React项目中。

17）其他使用场景

React是一个强大的用户交互界面的渲染类库，它提供了一种非常棒的方式来渲染数据和处理用户输入。本章将探讨React在桌面应用、游戏、邮件和图表方面的应用。第2章JSX

在React中，组件是用于分离关注点的，而不是被当作模板或处理显示逻辑的。在使用React时，你必须接受这样的事实，那就是HTML标签以及生成这些标签的代码之间存在着内在的紧密联系。该设计允许你在构建标签结构时充分利用JavaScript的强大能力，而不必在笨拙的模板语言上浪费时间。

React与一种可选的类HTML标记语言搭配得很棒。不过在继续之前，我们要先说清楚一件事——对于那些讨厌在JavaScript中写HTML标签，以及那些还不明确JSX用处的人，请考虑在React中体会JSX的下列好处：● 允许使用熟悉的语法来定义HTML元素树。● 提供更加语义化且易懂的标签。● 程序结构更容易被直观化。● 抽象了React Element的创建过程。● 可以随时掌控HTML标签以及生成这些标签的代码。● 是原生的JavaScript。

本章会探索JSX的诸多优点，如何使用JSX，以及将它与HTML区分开来的一些注意事项。记住，JSX并不是必需的。如果你决定不使用它，则可以直接跳到本章的结尾了解在React中不使用JSX的一些小提示。

在本书中，我们将会使用最新版本的JavaScript——即ES6（或称ES2015）——来提供代码示例。可以在https://babeljs.io/docs/learn-es2015/获得一个不错的入门指南。什么是JSX

JSX即JavaScript XML——一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐你使用JSX。

举个例子，在不使用JSX的React程序中创建一个标题的函数调用大概是这个样子：React.createElement('h1', {className: 'question'}, 'Questions');

如果使用了JSX，上述调用就变成了下面这种更熟悉且简练的标签：

Questions

与以往在JavaScript中嵌入HTML标签的几种方案相比，JSX有如下几个明显的特征：1. JSX是一种句法变换——每一个JSX节点都对应着一个JavaScript

函数。2. JSX既不提供也不需要运行时库。3. JSX并没有改变或添加JavaScript的语义——它只是简单的函数

调用而已。

与HTML的相似之处赋予了JSX在React中强大的表现力。下面我们将要讨论使用JSX的好处以及它在程序中发挥的作用，同时还会讨论JSX与HTML的关键区别。使用JSX的好处

当讨论JSX时，很多人会问——为什么要用它，为什么在已经有那么多模板语言的情况下还要使用JSX，为什么不直接使用原生的JavaScript。毕竟，JSX最后只是被简单地转换成对应的JavaScript函数而已。

使用JSX有很多好处，而且这些好处会随着代码库的日益增大、组件的愈加复杂而变得越来越明显。我们来看看这些好处究竟是什么。更加熟悉

许多团队都包括了非开发人员，例如熟悉HTML的UI及UX设计师和负责完整测试产品的质量保证人员。使用JSX之后，这些团队成员都可以更轻松地阅读和贡献代码。任何熟悉基于XML语言的人都能轻松地掌握JSX。

此外，由于React组件囊括了所有可能的DOM表现形式（后续详细解释），因此JSX能巧妙地用简单明了的方式来展现这种结构。更加语义化

除了更加熟悉外，JSX还能够将JavaScript代码转换为更加语义化、更加有意义的标签。这种设计为我们提供了使用类HTML语法来声明组件结构和数据流向的能力，我们知道它们后续会被转换为原生的JavaScript。

JSX允许你在应用程序中使用所有预定义的HTML5标签及自定义组件。稍后会讲述更多关于自定义组件的内容，而这里只是简单地说明JSX是如何做到让JavaScript更具可读性的。

举个例子，让我们设想一个Divider元素，它会渲染出一个位于左边的标题和一个撑满右边的水平分割线。这个Divider的JSX结构大概是下面的样子：

把上面的HTML包裹进一个Divider React Component后，你就可以像使用其他任何HTML元素一样使用它了。相比原生的HTML，Divider提供了更丰富的语义。Questions更加直观

即使像上述例子一样的小组件，JSX也能让它更加简单、明了、直观。在有上百个组件及更深层标签树的大项目中，这种好处会被成倍地放大。

下面是前面提到的Divider组件。我们注意到在函数作用域内，使用JSX语法的版本与使用原生JavaScript相比，其标签的意图变得更加直观，可读性也更强。

以下是原生JavaScript版本：render: function () { return React.createElement('div', {className:"divider"}, "Label Text", React.createElement('hr') );}

以下是使用JSX的版本：render: function () { return (

绝大多数人都认为JSX版本更加易懂，也更容易调试。关注点分离

最后，也是React的核心，旨在将HTML标签以及生成这些标签的代码内在地紧密联系在一起。在React中，你不需要把整个应用程序分离成视图和模板两种文件。相反，React鼓励你创造一个个独立的组件，并把所有的逻辑和标签封装在其中。

JSX以干净且简洁的方式保证了组件中的标签与所有业务逻辑的相互分离。它不仅提供了一个清晰、直观的方式来描述组件树，同时还让应用程序更加符合逻辑。复合组件

目前为止，我们已经看到了使用JSX的若干好处，同时也看到了它是如何用简洁的标记格式来表示一个组件的。下面我们看看JSX如何帮我们组装多个组件。

这个小节包含了以下内容：● 在JavaScript文件中包含JSX的准备工作。● 详细说明组件的组装过程。● 讨论组件的所有权以及父/子组件关系。

我们开始依次探索。定义一个自定义组件

继续来看我们之前提到的分页组件，下面再次列出我们期望输出的HTML。

要将这个HTML片段表示为React Component，只需要把它像下面这样包装起来，然后在render方法中返回这些标签。class Divider extends React.Component { render() { return (

当然目前这还只是一个展示静态内容的组件。要让这个组件变得实用，我们还需要一种动态输出h2标签中文本的方法。使用动态值

JSX将两个花括号之间的内容{...}渲染为动态值。花括号指明了一个JavaScript上下文环境——在花括号中放入的任何东西都会被进行求值，得到的结果被渲染为标签中的若干节点。

对于简单值，比如文本或者数字，你可以直接引用对应的变量。可以像下面这样渲染一个动态的h2标签：var text = 'Questions';

{text}

Questions

对于更复杂的逻辑，你可能更倾向于将其转化为一个函数来进行求值。可以通过在花括号中调用这个函数来渲染期望的结果：function dateToString(d) { return [ d.getFullYear(), d.getMonth() + 1, d.getDate() ].join('-');};

{dateToString(new Date())}

2014-10-18

React通过将数组中的每个元素渲染为一个节点的方式对数组进行自动求值。var text = ['hello', 'world'];

{text}

helloworld

比起简单值，我们通常希望渲染一些更复杂的数据。比如说，你可能希望把数组中的所有数据渲染为若干个

在HTML中，使用

Questions

React将开始标签与结束标签之间的所有子节点保存在一个名为this.props.children的特殊组件属性中。在这个例子中，this.props.children == "Questions"。至于children属性的具体结构并没有记载在React官方文档，因此不要尝试去读取其中的内容。你需要做的就是将this.props.children原样写在render方法中即可。

掌握了这一点，就可以将硬编码的“Questions”换为变量this.props.children了。现在React会把你放在标签之间的任何东西渲染出来。class Divider extends React.Component { render() { return (

至此，就可以像使用任何HTML元素一样使用组件了。Questions

当我们把上面的JSX代码转换为JavaScript时，会得到下面的结果（转换为ES6代码）：class Divider extends React.Component { render() { return ( React.createElement("div", {className: "divider"}, React.createElement("h2", null, this.props.children), React.createElement("hr", null) ) ); }};

而最终渲染输出的结果正如你所期待的那样：

JSX很像HTML，但却不是HTML语法的完美复制品（这样说是有充分理由的）。实际上，JSX规范中这样声明：这个规范（JSX）并不尝试去遵循任何XML或HTML规范。JSX是作为一种ECMAScript特性来设计的，至于大家觉得JSX像XML这一事实，那仅仅是因为大家比较熟悉XML。以上内容摘自http://facebook.github.io/jsx/。

下面我们探索一下JSX与HTML语法上的几点关键区别。属性

在HTML中可以用内联的方式给每个节点设置属性，像这样：

JSX以同样的方式实现了属性的设置，同时还提供了将属性设置为动态JavaScript变量的便利。要设置动态的属性，需要把原本用引号括起来的文本替换成花括号包裹的JavaScript变量。var surveyQuestionId = this.props.id;var classes = 'some-class-name';...

对于更复杂的情景，还可以把属性设置为一个函数调用返回的结果。

现在，React每渲染一个组件时，我们指定的变量和函数会被求值，而最终生成的DOM结构会反映出这个新的状态。访问http://git.io/vlcpa，可以阅读到示例项目的全部源码，这个项目将贯穿在本书的内容中。条件判断

在React中，一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起。这意味着可以轻松地利用JavaScript强大的魔力，比如循环和条件判断。

要想在组件中添加条件判断似乎是一件很困难的事情，因为if/else逻辑很难用HTML标签来表达。直接往JSX中加入if语句会渲染出无效的JavaScript：

而解决的办法就是使用以下某种方法：● 使用三目运算符● 设置一个变量并在属性中引用它● 将逻辑转化到函数中● 使用&&运算符

下面简单地演示一下各种方法。

使用三目运算符...render() { return (

虽然对于文本来说三目运算符可以正常运行，但是如果想要在其他情况下很好地应用React Component，三目运算符就可能显得笨重又麻烦了。对于这些情况最好是使用下面的方法。

使用变量...getIsComplete() { return this.state.isComplete ? 'is-complete' : '';}render() { var isComplete = this.getIsComplete(); return (

使用函数...getIsComplete() { return this.state.isComplete ? 'is-complete' : '';}render() { return (

使用逻辑与（&&）运算符

对于null或false值React不会输出任何内容，因此可以使用一个后面跟随了期望字符串的布尔值来实现条件判断。如果这个布尔值为true，那么后续的字符串就会被使用。render() { return (

下面的特殊属性只在JSX中存在：● key● ref● dangerouslySetInnerHTML

下面我们将讨论更多的细节。

键（key）

key是一个可选的唯一标识符。元素或者列表与相邻节点的位置可能会发生变化，比如当用户在进行搜索操作时，或者当一个列表中的元素被增加、删除时。当这些情况发生时，组件可能并不需要被销毁并重新创建。

通过给组件设置一个独一无二的键，并确保它在一个渲染周期中保持一致，使得React能够更智能地决定应该重用一个组件，还是销毁并重新创建一个组件，进而提升渲染性能。当两个已经存在于DOM中的组件交换位置时，React能够匹配对应的键并进行相应的移动，且不需要完全重新渲染DOM。

引用（ref）

ref允许父组件在render方法之外保持对子组件的一个引用。

在JSX中，可以通过在属性中设置期望的引用名来定义一个引用。...render() { return

然后，就可以在组件中的任何地方使用this.refs.myInput获取这个引用了。对于像input这样的DOM组件来说，ref引用的值就是这个输入框的DOM节点；而对于复合组件来说，引用的值是这个组件的一个实例。在实际应用开发过程中，应该很少用到ref，因为这是背离了React声明式特性的特殊用法。

更多关于父/子组件关系及所有权的详细讨论请参阅第6章。

设置原始的HTML

dangerouslySetInnerHTML——有时候需要将HTML内容设置为字符串，尤其是使用了通过字符串操作DOM的第三方库时。为了提升React的互操作性，这个属性允许使用HTML字符串。然而如果能避免使用它，还是不要使用。要让这个属性发挥作用，需要把字符串设置到一个主键为__html的对象里，像这样：...render() { var htmlString = { __html: "an html string" }; return

在所有浏览器中，事件名已经被规范化并统一用驼峰形式表示。例如，change变成了onChange，click变成了onClick。在JSX中，捕获一个事件就像给组件的方法设置一个属性一样简单。...handleClick(event) {...},render() { return (

注意，在这里使用了箭头函数因为这样可以自动绑定this。如果不这样写，在handleClick中this将会是undefined。同时，这样的写法能更轻松地判断该把哪些参数传递给对应的函数。

更多关于React中事件系统的细节请参阅第9章。注释

JSX本质上就是JavaScript，因此可以在标签内添加原生的JavaScript注释。注释可以用以下两种形式添加：1. 当作一个元素的子节点。2. 内联在元素的属性中。

作为子节点

子节点形式的注释只需要简单地包裹在花括号内即可，并且可以跨越多行。

作为内联属性

内联的注释可以有两种形式。首先，可以使用多行注释：

也可以使用单行注释：

由于JSX会转换为原生的JavaScript函数，因此有一些关键词我们是不能用的——如for和class。

要给表单里的标签添加for属性需要使用htmlFor。

而要渲染一个自定义的class需要使用className。如果你比较习惯HTML语法，那么可能会觉得这样做有些别扭。但是从JavaScript角度来看，这样做就显得很一致了。因为我们可以通过elem.className来获取一个元素的class。

最后，我们要谈谈内联样式。React把所有的内联样式都规范化为了驼峰形式，与JavaScript中DOM的style属性一致。

要添加一个自定义的样式属性，只需简单地把驼峰形式的属性名及期望的CSS值拼装为对象即可。var styles = { borderColor: "#999", borderThickness: "1px"};React.renderComponent(

所有的JSX标签最后都会被转换为原生的JavaScript。因此JSX对于React来说并不是必需的。然而，JSX确实减少了一部分复杂性。如果你不打算在React中使用JSX，那么在React中创建元素时需要知道以下三点：1. 定义组件类。2. 创建一个为组件类产生实例的工厂。3. 使用工厂来创建ReactElement实例。创建React元素

回想一下我们之前定义过一个Divider组件类。下面它被重命名为DividerClass，以此来明确它的目的。class DividerClass extends React.Component { render() { return ( React.createElement("div", {className: "divider"}, React.createElement("h2", null, this.props.children), React.createElement("hr", null) ) ); }});

要在没有JSX的情况下使用这个DividerClass，可以调用React.createElement或React.createFactory。

要直接创建元素，只需要简单地调用createElement方法。var divider = React.createElement(DividerClass, null, 'Questions');

而要创建一个工厂，首先需要使用createFactory方法。var Divider = React.createFactory(DividerClass);

现在有了工厂函数，就可以使用它自由地创建ReactElement了。var divider = Divider(null, 'Questions');延伸阅读及参考引用

即使你不赞同在JavaScript里写HTML标签这一理念，也希望你能够理解在JavaScript及其渲染出来的HTML标签的紧密联系中，JSX是如何提供一种解决方案的。随着受欢迎程度的逐渐增加，JSX也有了自己的规范，这些规范提供了深层次的技术定义。如果你还不确定是否要使用JSX，或者对它的工作方式存在疑惑，有一些工具可以帮助你进行试验。JSX官方规范

2014年9月Facebook发布了一份JSX官方规范，陈述了他们要创造JSX的根本原因，以及一些关于语法上的技术细节。可以在http://facebook.github.io/jsx/上阅读到更多信息。

在浏览器中实验

有很多可选的工具可以用于测试JSX。React文档中的Getting Started页面给出了两个指向JSFiddle的链接，其中一个内置了JSX，另一个没有。

http://facebook.github.io/react/docs/getting-started.html

对于现实中的应用，官方推荐的工具是Babel，它提供了几乎完整的ES6支持。

https://babeljs.io/

在下一章中我们将探索React组件的生命周期。第3章组件的生命周期

在组件的整个生命周期中，随着该组件的props或者state发生改变，它的DOM表现也将有相应的变化。一个组件就是一个状态机：对于特定的输入，它总会返回一致的输出。

React为每个组件提供了生命周期钩子函数去响应不同的时刻——创建时、存在期及销毁时。我们在这里将按照这些时刻出现的顺序依次介绍——从实例化开始，到活动期，直到最后被销毁。生命周期方法

React的组件拥有简洁的生命周期API，它仅仅提供你所需要的方法，而不会去追求全面。接下来我们按照它们在组件中的调用顺序来看一下每个方法。实例化

一个实例初次被创建时所调用的生命周期方法与其他各个后续实例被创建时所调用的方法略有不同。当你首次使用一个组件类时，你会看到下面这些方法依次被调用：● constructor● componentWillMount● render● componentDidMount存在期

随着应用状态的改变，以及组件逐渐受到影响，你将会看到下面的方法依次被调用：● componentWillReceiveProps● shouldComponentUpdate● componentWillUpdate● render● componentDidUpdate销毁&清理期

最后，当该组件被使用完成后，componentWillUnmount方法将会被调用，目的是给这个实例提供清理自身的机会。

现在，我们将会依次详细介绍这三个阶段：实例化、存在期及销毁&清理期。实例化

当每个新的组件被创建、首次渲染时，有一系列的方法可以用来为其做准备工作。这些方法中的每一个都有明确的职责，如下所示。constructor(props,context)

构造器准许你设置实例的属性以及组件的状态。一个典型的构造器就像下面这样： class Foo extends React.Component { constructor(props){ super(); // 调用父组件的构造器，必需项 this.state = {x: 'y'}; } render(){ ... }}componentWillMount

该方法会在完成首次渲染之前被调用。这也是在render方法调用前可以修改组件state的最后一次机会。它的存在仅仅是为了体现生命周期的完整性；是createClass的遗留物，现在已经被constructor替代。render

在这里会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来说，render是唯一一个必需的方法，并且有特定的规则。render方法需要满足下面几点：● 只能通过this.props和this.state访问数据。● 可以返回null、false或者任何React组件。● 只能出现一个顶级组件（不能返回一组元素）。● 必须纯净，意味着不能改变组件的状态或者修改DOM的输出。

render方法返回的结果不是真正的DOM，而是一个虚拟的表现，React随后会把它和真实的DOM[1]做对比，来判断是否有必要做出修改。componentDidMount

在render方法成功调用并且真实的DOM已经被渲染之后，可以在componentDidMount内部通过ReactDOM.findDOMNode(this)方法或者使用ref来访问它。

这就是可以用来访问原始DOM的生命周期钩子函数。比如，当你需要测量渲染出DOM元素的高度，或者使用计时器来操作它，亦或运行一个自定义的jQuery插件时，可以将这些操作挂载到这个方法上。

举例来说，假设需要在一个通过React渲染出的表单元素上使用jQuery UI的Autocomplete插件，则可以这样使用它：

试读结束[说明：试读内容隐藏了图片]

下载完整电子书