深入浅出React和Redux

前言

互联网技术发展一日千里，网页应用开发技术也不例外，这本书介绍的是在这一领域备受瞩目的两个工具 React 和 Redux。

自从iOuery 问世以来，它就在网页开发领域占据统治地位，同时，还有许多MVC 框架如雨后春笋般出现。但是业界也普遍发现，iOuery 和各种MVC框架在开发大型复杂应用时，依然面临很多难以克服的困难。

当 2014年 Facebook 推出 React 时，给整个业界带来全新的看待网页应用开发的方式，和 React 一同问世的 Flux，也克服传统 MVC框架的很多弊病。技术在不断发展，在 2015年，Flux 的一个变体 Redux 出现，进一步优化了Flux 的功能。

React 和 Redux 的结合，让网页开发的方式耳目一新，写这本书的初衷，是为了让国内读者能够一睹 React 和 Redux 的内在原理并深入实践。

在这里深入介绍 React 和 Redux，绝不是贬抑其他前端框架，事实上，开发者应该接触不同的开发模式，才能融会贯通，对技术有一个全面的认识，若要掌握某种技术，就要深入学习，这就是本书的目的。对 React 和 Redux 的了解不要只是停留在能用的表面功夫，重要的是理解内在的原理。

本书的内容

希望读者把阅读这本书的过程当做一个旅程，由浅入深地了解 React 和 Redux，如果你对 React 和 Redux 技术已经有一些了解，可以直接跳到感兴趣的章节。本书包括 12 章，如下所示。

第1章，React 新的前端思维方式。实际操作快速创建一个 React 应用，介绍和传统网页开发相比 React 应用开发的独特方式。

第 2 章，设计高质量的 React 组件。React 提倡基于组件的设计，这一章通过开发一个ControlPanel 组件的实践，介绍了开发高质量 React组件的原则，详细介绍 React组件的生命周期和数据管理方式。

第 3章，从Flux到Redux。通过 Flux介绍了单向数据流的框架模式，由此引出比 Flux更优秀的 Redux 框架，通过用不同框架实现 ControlPanel 应用可以比较框架的优劣。

第 4章，模块化 React 和 Redux 应用。这一章通过开发一个Todo 应用介绍将 React 和 Redux 结合的方法。

第5章，React组件的性能优化。通过对 Todo 应用的性能优化，介绍提高 React 组件渲染性的方法，以及提高从 Store 获取数据性能的方法。

第6章，React 高级组件。介绍高阶组件和"以函数为子组件"的模式。

第7章，Redux 和服务器通信。通过开发一个天气信息应用的实践，介绍应如何在 React 和 Redux 的环境中实现与服务器的通信。

第 8章，单元测试。介绍针对 React 和 Redux 的单元测试技巧。第 9 章，扩展 Redux。介绍创建中间件和 Store Enhancer 的技巧。

第 10章，动画。介绍在 React 中通过 ReactTransitionGroup 和 React-Motion 库实现动画的技巧。

第 11 章，多页面应用。介绍如何创建多页面路由，以及为了提高网页装载性能的代码分片技巧。

第 12 章，同构。创建让 React 组件能够在服务器端和浏览器端渲染的技术。

本书的目标读者

阅读这本书只需要一些基本的 JavaScript、HTML 和 CSS 知识，了解网页应用的工作原理，就足够具备体验 React 和 Redux 这种全新的开发方式。

如果你熟悉传统的 jQuery 应用开发，那么通过阅读本书会让你发现不一样的应用构建模式;如果你之前学习过Angular.is 或者Vue.is，那么对理解React和 Redux的工作机理很有帮助，同时有机会体验同样一种思想的不同实现之道。

即使你对 React 和 Redux 已经有了一定认识，相信阅读此书也不会让你觉得是浪费时间，因为书中不只是介绍"如何去做"，更多地还解释了"为什么这么做"，相信阅读此书会让你对 React 和 Redux 会有更多更深的认识。

第1章 React 新的前端思维方式

我们先来直观认识 React，对任何一种工具，只有使用才能够熟练掌握，React 也不例外。通过对 React快速入手，我们会解析 React 的工作原理，并通过与功能相同的 jQuery 程序对比，从而看出 React 的特点。

在这一章中，我们会介绍∶口 如何初始化一个 React 项目;口 如何创建一个 React 组件;口 React 的工作方式。让我们开始旅程吧!

1.1 初始化一个 React 项目

为了开发 React 应用，你的电脑是运行微软 Windows 操作系统，还是苹果 Mac，或者是 Linux，并不重要，只需要保证具备以下条件∶

口 安装了浏览器，如果是 Windows操作系统，请保证微软 IE 浏览器版本不低于8.0 版，因为 React 不支持比 IE 8 更低版本的浏览器;

口 有一个命令行环境，在 Windows 操作系统中有命令行界面，在苹果 Mac 电脑中可以使用 Terminal 应用，对于 Linux 用户，命令行环境我想不用过多解释;

口 一个你最喜欢的代码编辑器，用于编辑 React 应用的代码，本书内容注重实践，只有实际编码才能有深入体会。

作为开发者，推荐使用谷歌 Chrome 浏览器，因为 Chrome 浏览器自带的开发辅助工具非常友好，而且还可以安装辅助 React 和 Redux 的扩展工具，具体的开发工具在第4章 4.2 节中有详细介绍。

React是一个 JavaScript 语言的工具库，在这个 JavaScript 工具铺天盖地的时代，没有意外，你需要安装 Node.js，React 本身并不依赖于 Node.js，但是我们开发中用到的诸多工具需要 Node.js 的支持。

在 Node.js 的官网 （https∶//nodejs.org/）可以找到合适的安装方式，安装 Node.js 的同时也就安装了npm，npm 是 Node.js的安装包管理工具，因为我们不可能自己开发所有功能，会大量使用现有的安装包，就需要 npm 的帮助。

1.1.1 create-react-app 工具

React技术依赖于一个很庞大的技术栈，比如，转译 JavaScript 代码需要使用 Babel，模块打包工具又要使用 Webpack，定制 build 过程需要 grunt或者 gulp……这些技术栈都需要各自的配置文件，还没有开始写一行 React 相关代码，开发人员就已经被各种技术名词淹没。

针对这种情况，React的创建者 Facebook 提供了一个快速开发 React应用的工具，名叫 create-react-app，这个工具的目的是将开发人员从配置工作中解脱出来，无需过早关注这些技术栈细节，通过创建一个已经完成基本配置的应用，让开发者快速开始 React应用的开发。

本书中所有应用实例都由 create-react-app 创建，我们用这种最简单的方式创建可运行的应用，必要的时候才会介绍底层技术栈的细节，毕竟，没有什么比一个能运行的应用更加增强开发者的信心。

create-react-app是一个通过npm 发布的安装包，在确认 Node.js 和 npm 安装好之后，命令行中执行下面的命令安装 create-react-app∶

npm install --global create-react-app

安装过程结束之后，你的电脑中就会有 create-react-app这样一个可以执行的命令，这个命令会在当前目录下创建指定参数名的应用目录。

我们在命令行中执行下面的命令∶

create-react-app first_react_app

这个命令会在当前目录下创建一个名为 first_react_app 的目录，在这个目录中会自动添加一个应用的框架，随后我们只需要在这个框架的基础上修改文件就可以开发 React 应用，避免了大量的手工配置工作∶

在 create-react-app 命令一大段文字输出之后，根据提示，输入下面的命令∶

 cd first_react_app 
 npm start

这个命令会启动一个开发模式的服务器，同时也会让你的浏览器自动打开了一个网页，指向本机地址，显示界面如图1-1 所示。

【下载地址】

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

提取码：et65