react设计模式和最佳实践

内 容 提 要

本书共分为12 章，通过介绍 React 中最有价值的设计模式，展示如何将设计模式和最佳实践应用于现实的新项目和已有项目中。主要内容包括帮助读者理解 React 的基本概念，学习编写整洁、可维护的代码;优化 React 组件，使应用拥有更快的速度和响应性 ; 介绍如何有效地编写测试，避免反模式，开源组件并对 React 生态系统做贡献。

本书适合想要深入理解 React，希望提高相关编程技能的前端开发人员阅读。

前 言

本书将带你全面了解 React 中最有价值的设计模式，并展示如何在全新或已有的真实项目中应用设计模式与最佳实践。本书将帮助你让应用变得更加灵活、运行更流畅并且更容易维护——在不降低质量的情况下极大地提升工作流的速度。

我们将首先理解 React 的内部原理，接着逐步编写整洁且可维护的代码。我们将开发能够在整个应用中复用的组件，搭建应用架构，并创建真正可用的表单。

接下来，我们会为 React 组件编写样式并优化组件，从而使应用运行得更快且更具响应性。最后，我们将有效地编写测试代码，还会学到如何为 React 及其生态系统做贡献。

学完本书后，你会从大量的试错以及开发难题中解脱出来，也将踏上成为 React 专家的道路。

本书内容

第 1章，React 基础。这一章从高级角度介绍了React 的基本概念。

第 2 章，整理代码。这一章讲解了编写可维护代码中最重要的一个方面，即保持代码整洁并遵循编程风格指南。了解函数式编程的基础知识对于使用 React 也很重要。

第 3 章，开发真正可复用的组件。这一章阐述了构建应用的一个关键因素在于使用组件，而要想保持代码库整洁且可维护，最重要的是开发真正可复用的组件。

第 4 章，组合一切。这一章阐述了真实应用由不同的组件构成，重要的是让组件之间可以高效地通信，并按照正确的形式组织和搭建层次结构。

第 5 章，恰当地获取数据。这一章指明了任何客户端应用在某些时刻都必须处理数据，并且介绍了不同的技巧和方法，让你能够以 React 的方式获取数据。

第 6 章，为浏览器编写代码。这一章阐述了如何正确使用在浏览器中运行的应用，还讲解了一些高级概念，如事件、动画以及如何与 DOM交互。

第 7 章，美化组件。这一章说明了开发美观的 UI组件是前端工程中很重要的一部分内容。

React 可以通过多种方式实现这个目的，每种方式从不同角度解决该问题。了解可用的库及其工作原理，对于做出正确的选择至关重要。

第 8章，服务端渲染的乐趣与益处。这一章指明了服务端渲染是 React众多优秀特性之一。虽然该特性开箱即用，但学习其正确用法很重要，因为这样才能充分加以利用。

第9章，提升应用性能。这一章阐述了性能是 Web 平台吸引用户的重要因素之一。React提供了一系列工具和技术来创建快如闪电的应用，这一章将全面介绍这些内容。

第 10 章，测试与调试。这一章会让你意识到，我们都希望自己的应用保持稳定，并且能够应对一切极端情况，而测试有助于实现这个目的。编写全面的测试集对于创建稳定且可维护的代码至关重要。从另一方面来看，bug 总会出现，而知道如何调试并尽早发现问题很关键。

第 11 章，需要避免的反模式。这一章阐明了开发人员经常尝试采取捷径和创意方案这一事实，但在某些情况下这种做法对应用来说是很危险的，尤其是团队以及代码库规模很大时。这一章将带你了解使用 React 时，应该避免的常见反模式。

第 12 章，未来的行动。这是本书的最后一章，至此我们已经介绍完所有主题。我认为探讨如何开源组件（以回馈社区）以及如何为 React 及其生态系统做贡献也很重要。

第1章 react基础

1.1 声明式编程

只要阅读过 React 文档或者相关博文，那么你肯定遇到过声明式这一术语。

其实，React 如此强大的原因之一就在于它推行声明式编程范式。

因此，要想掌握 React，就需要理解声明式编程的含义，以及其与命令式编程之间的主要区别。

理解该问题的最简方式是∶ 命令式编程描述代码如何工作，而声明式编程则表明想要实现什么目的。

与命令式世界极其相似的一个真实示例就是去酒吧喝啤酒并对服务员做出以下指示∶口从架子上拿一个玻璃杯;口将杯子放到酒桶前;□ 按下酒桶开关，将杯子倒满;口 把杯子递给我。

但在声明式世界中，你只需要说∶"请给我一杯啤酒。"

按声明式方式点一杯啤酒，需要假设服务员知道如何提供啤酒，这是声明式编程工作原理的一个重要方面。

我们来看一个JavaScript代码的示例。编写—个简单函数，给定包含大写字符串的数组时该函数返回包含相同的小写字符串的数组。

toLowerCase( ['FOO','BAR'])/ / ['foo','bar']

解决该问题的命令式函数的实现如下所示∶

const toLowerCase = input =>{
  const output = [ ]
  for (let i = 0; i < input.length; i++){
    output.push (input [i] .toLowerCase( ))
  }
  return out put
}

首先，创建一个空数组来保存结果。接着，函数循环遍历输入数组中的所有元素，并将小写值推进空数组中。最后，返回需要输出的数组。

声明式实现如下所示∶

const toLowerCase = input => input.map(
value => value. toLowerCase()
）

输入数组中的元素会传递到 map 函数，然后map 函数会返回包含小写值的新数组。这里需要注意几点比较重要的差别∶前一个示例不够优雅，而且需要花更多精力才能理解;后者更加简洁、易读，这对注重可维护性的大型代码库来说非常重要。

另外值得一提的是，声明式编程中无须使用变量，也不用在执行过程中持续更新变量的值。事实上，声明式编程往往避免了创建和修改状态。

我们来看最后一个示例，了解一下 React 的声明式具体指什么。

我们要解决的问题是 Web 开发中常见的一个需求∶展示带有标记的地图。

【下载地址】

链接：https://pan.baidu.com/s/19EPGl_YEPBubOAdhCESJmQ

提取码：jwln