React设计模式与最佳实践 pdf

React设计模式与最佳实践

内容简介

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

作者简介

米凯莱·贝尔托利(Michele Bertoli)是Facebook前端工程师,曾任职于YPlan和BIZZBY等公司,拥有超过15年的实践经验。他喜欢整洁且经过充分测试的代码,目前致力于使用React.js来开发现代JavaScript应用。

目录

第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

感悟与笔记

关于命令式与声明式

远古时代其实只有声明式,毕竟只有原生的DOM可使用,然后有了jQuery或者其他一些库,比如ExtJS等,就变成了命令式。因为操作DOM只能通过调用JavaScript进行。慢慢的,人们觉得命令式的方式不直观,君不见,groovy的Gradle到现在也干不掉XML的Maven,我觉得XML的直观性是其中一方面的原因。

再通俗一点说的话,canvas画图就是命令式,svg画图就属于声明式

其实JSX的编译就是一个将声明式转为命令式的过程,将

<a href="https://facebook.github.io/react/">Click me!</a></blockquoteclass="p-1">

转成了

React.createElement("a", { href: "https://facebook.github.io/react/" }, "Click me!");

因为虽然Web Component的正式规范已出,但目前主流可用的几个框架还是使用自己实现的组件方式来开发,必然只能将声明式的DOM转成了命令式的代码,并且有V8这些杠杠的引擎做性能保证。

会员免费下载

链接:https://pan.baidu.com/s/1PqY0I6eZcwvwrZxdsFu3lw

提取码: ****** 查看

¥69/年 开通VIP会员

成为本站VIP会员即可无限下载。 请先点击百度网盘,看资源是否还在,不在请点击链接通知站长补资源。

资源标签点击标签可查看对应分类的资源

前端框架

资源推荐

免费 图解数据结构:使用Java

C++ 程序设计语言:第4部分 标准库(原书第4版)

C++编程思想(两卷合订本)

CSS世界

JavaScript DOM编程艺术(第2版)

C++ Primer Plus(第6版) 中文版

Vue.js快速入门

Java编程思想(第4版) [thinking in java]

Copyright © 2021-2022 知识猫. All Rights Reserved.