React设计模式与最佳实践pdf

本书介绍如何构建更加灵活、运行流畅、易于维护的应用，让开发人员在不降低质量的情况下极大地提升工作流的速度。读者将首先了解React的内部原理，开发能够在整个应用中复用的组件，搭建应用架构，创建真正可用的表单；随后会为React组件编写样式并优化组件，编写测试代码；最后还会学到如何为React及其生态系统做贡献。

※ 编写整洁、易维护的代码

※ 应用技巧创建可复用的组件

※ 在浏览器和节点中有效运用React

※ 根据应用的需要选择美化方案

※ 使用服务端渲染提升应用加载速度

※ 通过优化组件来构建高性能应用

React设计模式与最佳实践 内容简介

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

React设计模式与最佳实践 目录

第 1章　React基础　　1

1．1　声明式编程　2

1．2　React元素　3

1．3　忘掉所学的一切　5

1．4　常见误解　7

1．5　小结　9

第　2章 整理代码　10

2．1　JSX　10

2．1．1　Babel　11

2．1．2　Hello，World！　12

2．1．3　DOM元素与React组件　13

2．1．4　属性　13

2．1．5　子元素　13

2．1．6　JSX与HTML的区别　14

2．1．7　展开属性　17

2．1．8　JavaScript模板　17

2．1．9　常见模式　17

2．2　ESLint　25

2．2．1　安装　25

2．2．2　配置　25

2．2．3　React插件　28

2．2．4　Airbnb的配置　29

2．3　函数式编程基础　30

2．3．1　一等对象　30

2．3．2　纯粹性　31

2．3．3　不可变性　31

2．3．4　柯里化　32

2．3．5　组合　33

2．3．6　函数式编程与UI　33

2．4　小结　33

第3章　开发真正可复用的组件　34

3．1　创建类　34

3．1．1　createClass工厂方法　35

3．1．2　继承React．Component　35

3．1．3　主要区别　36

3．1．4　无状态函数式组件　40

3．2　状态　42

3．2．1　外部库　43

3．2．2　工作原理　43

3．2．3　异步　44

3．2．4　React lumberjack　45

3．2．5　使用状态　45

3．3　prop类型　48

3．4　可复用组件　51

3．5　可用的风格指南　54

3．6　小结　58

第4章　组合一切　59

4．1　组件间的通信　59

4．2　容器组件与表现组件模式　62

4．3　mixin　67

4．4　高阶组件　69

4．5　recompose　72

4．6　函数子组件　76

4．7　小结　78

第5章　恰当地获取数据　79

5．1　数据流　79

5．1．1　子组件与父组件的通信（回调函数）　81

5．1．2　公有父组件　82

5．2　数据获取　83

5．3　react-refetch　88

5．4　小结　92

第6章　为浏览器编写代码　93

6．1　表单　93

6．1．1　自由组件　94

6．1．2　受控组件　98

6．1．3　JSON schema　100

6．2　事件　102

6．3　ref　104

6．4　动画　108

6．5　可扩展矢量图形　110

6．6　小结　113

第7章　美化组件　114

7．1　CSS in JavaScript　114

7．2　行内样式　116

7．3　Radium　120

7．4　CSS模块　124

7．4．1　Webpack　124

7．4．2　搭建项目　124

7．4．3　局部作用域的CSS　126

7．4．4　原子级CSS模块　131

7．4．5　React CSS模块　132

7．5　Styled Component　133

7．6　小结　136

第8章　服务端渲染的乐趣与益处　137

8．1　通用应用　137

8．2　使用服务端渲染的原因　138

8．2．1　SEO　138

8．2．2　通用代码库　139

8．2．3　性能更强　140

8．2．4　不要低估复杂度　140

8．3　基础示例　141

8．4　数据获取示例　146

8．5　Next．js　149

8．6　小结　151

第9章　提升应用性能　153

9．1　一致性比较与key属性　153

9．2　优化手段　158

9．2．1　是否要更新组件　158

9．2．2　无状态函数式组件　160

9．3　常用解决方案　160

9．3．1　why-did-you-update　161

9．3．2　在渲染方法中创建函数　162

9．3．3　props常量　165

9．3．4　重构与良好设计　167

9．4　工具与库　172

9．4．1　不可变性　172

9．4．2　性能监控工具　173

9．4．3　Babel插件　174

9．5　小结　174

第　10章 测试与调试　176

10．1　测试的好处　176

10．2　用Jest轻松测试JavaScript　178

10．3　灵活的测试框架Mocha　184

10．4　React JavaScript测试工具　187

10．5　真实测试示例　189

10．6　React组件树快照测试　195

10．7　代码覆盖率工具　198

10．8　常用测试方案　199

10．8．1　测试高阶组件　199

10．8．2　页面对象模式　203

10．9　Reactkai发者工具　206

10．10　React错误处理　207

10．11　小结　209

第　11章 需要避免的反模式　210

11．1　用prop初始化状态　210

11．2　修改状态　212

11．3　将数组索引作为key　215

11．4　在DOM元素上展开props对象　218

11．5　小结　219

第　12章 未来的行动　220

12．1　为React做贡献　220

12．2　分发代码　222

12．3　发布npm包　224

12．4　小结　225

React设计模式与最佳实践 精彩文摘

2.1.1 Babel

为了在代码中使用 JSX（及 ES2015的特性），我们需要安装 Babel。

首先，需要清楚地理解 Babel能为我们解决什么问题，以及为什么需要在开发流程中增加这个步骤。原因是我们想在浏览器这个目标环境中使用尚未实现的语言特性。这些高级特性允许开发者编写更整洁的代码，但浏览器无法识别并执行。

解决方案就是用 JSX和 ES2015语法编写脚本，准备发布时再将代码编译成当今主流浏览器都已实现的 ES5标准规范。