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

内容简介

Facebook的开源框架React.js，基于Virtual DOM重新定义了用户界面的开发方式，彻底革新了大家对前端框架的认识，将PHP风格的开发方式迁移到客户端应用开发。其优势在于可以与各种类库、框架搭配使用。本书由多位一线专家精心撰写，采用全程实例介绍和剖析了React.js的方方面面，适合广大前端开发者、设计人员，以及所有对未来技术趋势感兴趣者阅读。本书前版作为React首作推出之后，React生态继续蓬勃发展，技术及社区都在不断推陈出新。本书诸位专家作者适时推出新版，全面更新示例，用ES6重写代码，摒弃社区弃用范式，新增无状态组件、不可变数据、Redux等热点内容。阅读本书，不但可以夯实React开发基础，更能全方位紧跟整个React生态!

前言

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

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

本书内容

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

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

第1章 React简介

背景介绍

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

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

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

React本质上是一个"状态机"，可以帮助管理复杂的随着时间而变化的状态。它以一个精简的模型实现了这一点。React只关心两件事∶

1.更新DOM

2. 响应事件

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的性能，因为如果有很多事件处理器也会导致性能问题。

本书概览

本书将分四个大块进行讲述，帮助你在开发时充分发挥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提供了这样一种方式，即当你知道组件没有变化时，可以告诉渲染器无须重新渲染你的组件。通过这种方法可以大幅度地提高应用的速度。

【下载地址】

链接：https://pan.baidu.com/s/1gyfMPeVvgmRmsOuTn7BMBw

提取码：wwba