React快速上手开发 pdf epub mobi txt 电子书 下载 2025

简体网页||繁体网页

☆☆☆☆☆

斯托扬·斯特凡诺夫（Stoyan Stefanov） 著，张俊达 译

图书标签:

• React
• 前端开发
• JavaScript
• UI框架
• Web开发
• React入门
• 快速上手
• 编程
• 技术
• 教程

出版社： 人民邮电出版社

ISBN：9787115447739

版次：1

商品编码：12050955

包装：平装

丛书名： 图灵程序设计丛书

开本：16开

出版时间：2017-02-01

用纸：胶版纸

页数：187

正文语种：中文

编辑推荐

本书旨在帮你掌握Facebook的开源技术React，迅速建立富Web应用，构建组件并将其组织成可维护的大型应用程序。
解开Web应用开发之谜，从了解React基本原理开始。

* 设置React并编写第1个Hello World应用
* 创建并使用自定义React组件以及通用DOM组件
* 构建一个可以编辑、排序、搜索和导出内容的数据表格组件
* 使用JSX语法扩展作为调用函数的替代选择
* 设置一个帮你集中注意力于React上的简单构建过程
* 构建一个可以将数据存储在客户端的完整自定义应用
* 在应用规模增长时使用ESLint、Flow和Jest等工具检查并测试代码
* 使用Flux管理组件间的通信

内容简介

本书是React入门书。前3章介绍如何从空白的HTML页面开始构建应用。第4章介绍JSX语法。从第5章开始，你会学习到在实际开发中可能用到的一些附加工具。介绍的例子包括JavaScript打包工具、单元测试、语法检查、类型、在应用中组织数据流以及不可变数据。

作者简介

Stoyan Stefanov　Facebook开发工程师，图像优化工具smush.it的作者，性能优化工具YSlow2.0的架构师。曾多次在Velocity等技术大会上发表过演讲。另著有《JavaScript模式》和《JavaScript面向对象编程指南》，还为《高性能网站建设进阶指南》和《高性能JavaScript》贡献过内容。个人站点是http://phpied.com。

张俊达　毕业于华南理工大学，前端开发工程师，现任职于迅雷，主要负责移动Web开发工作。关注前端领域的新技术，乐于分享。

目录

第1章　Hello World　　1
1.1　设置　　1
1.2　Hello React World　　2
1.3　刚才发生了什么　　4
1.4　React.DOM.*　　4
1.5　特殊DOM属性　　7
1.6　React DevTools浏览器扩展　　8
1.7　下一步：自定义组件　　9
第2章　组件的生命周期　　10
2.1　基础　　10
2.2 　属性　　12
2.3　propTypes　　13
2.4　state　　16
2.5　带状态的文本框组件　　16
2.6　关于DOM事件的说明　　19
2.6.1　传统的事件处理　　20
2.6.2　React的事件处理　　21
2.7　props与state　　21
2.8　在初始化state时使用props：一种反模式　　22
2.9　从外部访问组件　　22
2.10　中途改变属性　　24
2.11　生命周期方法　　25
2.12　生命周期示例：输出日志记录　　26
2.13　生命周期示例：使用mixin　　28
2.14　生命周期示例：使用子组件　　30
2.15　性能优化：避免组件更新　　32
2.16　PureRenderMixin　　34
第3章　Excel：一个出色的表格组件　　37
3.1　构造数据　　37
3.2　表头循环　　38
3.3　消除控制台的警告信息　　40
3.4　添加内容　　41
3.5　排序　　44
3.6　排序的视觉提示　　46
3.7　编辑数据　　47
3.7.1　可编辑单元格　　48
3.7.2　输入字段的单元格　　50
3.7.3　保存　　50
3.7.4　结论与虚拟DOM Diff算法　　51
3.8　搜索　　52
3.8.1　状态与界面　　54
3.8.2　筛选内容　　55
3.8.3　如何改进搜索功能　　57
3.9　即时回放　　58
3.9.1　如何改进回放功能　　59
3.9.2　有另一种实现方法吗　　59
3.10　下载表格数据　　59
第4章　JSX　　62
4.1　Hello JSX　　62
4.2　转译JSX　　63
4.3　Babel　　64
4.4　客户端　　64
4.5　关于JSX转换　　66
4.6　在JSX中使用JavaScript　　68
4.7　在JSX中使用空格　　69
4.8　在JSX中使用注释　　70
4.9　HTML实体　　71
4.10　展开属性　　73
4.11　在JSX中返回多个节点　　75
4.12　JSX和HTML的区别　　77
4.12.1　class和for属性不能用了吗　　77
4.12.2　style属性值是一个对象　　77
4.12.3　闭合标签　　78
4.12.4　用驼峰法命名属性　　78
4.13　JSX 和表单　　78
4.14　使用JSX实现Excel组件　　82
第5章　为应用开发做准备　　83
5.1　一个模板应用　　83
5.1.1　文件和目录　　84
5.1.2　index.html　　85
5.1.3　CSS　　86
5.1.4　JavaScript　　86
5.1.5　更现代化的JavaScript　　86
5.2　安装必备工具　　89
5.2.1　Node.js　　90
5.2.2　Browserify　　90
5.2.3　Babel　　90
5.2.4　React相关　　91
5.3　开始构建　　91
5.3.1　转译JavaScript　　91
5.3.2　打包JavaScript　　92
5.3.3　打包CSS　　92
5.3.4　大功告成　　92
5.3.5　Windows版本　　93
5.3.6　在开发过程中构建　　93
5.4　发布　　94
5.5　更进一步　　95
第6章　构建应用　　96
6.1　Whinepad v. 0.0.1　　96
6.1.1 　基本设置　　97
6.1.2 　开始编写代码　　97
6.2　组件　　99
6.2.1　设置　　99
6.2.2　组件发现工具　　100
6.2.3　Button组件　　101
6.2.4　Button.css　　102
6.2.5　Button.js　　103
6.2.6　表单　　106
6.3　应用配置　　121
6.4　Excel：改进的新版本　　123
6.5　Whinepad　　131
6.6　总结　　134
第7章　lint、Flow、测试与复验　　136
7.1　package.json　　136
7.1.1　配置Babel　　137
7.1.2　脚本　　137
7.2　ESLint138
7.2.1　安装　　138
7.2.2　运行　　138
7.2.3　规则列表　　140
7.3　Flow　　140
7.3.1　安装　　141
7.3.2　运行　　141
7.3.3　注册类型检查　　141
7.3.4　修复Button　　142
7.3.5　app.js　　144
7.3.6　关于props和state类型检查的更多内容145
7.3.7　导出/导入类型　　147
7.3.8　类型转换　　148
7.3.9　invariant　　148
7.4　测试　　150
第8章　Flux　　165
8.1　理念　　166
8.2　回顾Whinepad　　166
8.3　Store　　167
8.4　Action　　175
8.5　Flux回顾181
8.6　immutable　　182
8.6.1　immutable存储数据　　183
8.6.2　immutable数据操作　　184
关于作者　　187
关于封面　　187

《前端性能优化实战指南》 内容简介 在瞬息万变的数字时代，用户体验已成为衡量网站或应用成功与否的关键标尺。而性能，无疑是构建卓越用户体验的基石。一个响应迅速、加载流畅的应用，能够极大地提升用户满意度，降低跳出率，甚至直接影响业务转化。本书《前端性能优化实战指南》正是应此需求而生，它将带领读者深入前端性能优化的核心，从理论到实践，层层剥茧，提供一套系统、全面且实用的性能优化解决方案。 本书不局限于单一的技术栈，而是放眼整个前端生态，涵盖了从网络传输、渲染机制到资源管理、代码优化等各个环节。我们将详细剖析性能瓶颈的常见来源，并提供行之有效的检测、诊断与优化手段。本书的目标是帮助开发者们掌握一套独立解决前端性能问题的能力，打造出令人惊艳的极致用户体验。 第一部分：性能优化的基石——理解与测量 在着手优化之前，深入理解性能的内涵以及掌握科学的测量方法至关重要。本部分将为读者打下坚实的理论基础。 第一章：什么是前端性能？ 性能的维度： 我们将从加载速度、交互响应、视觉流畅度等多个维度来理解前端性能。加载速度不仅仅是“白屏时间”，还包括了内容可见时间（LCP）、首次输入延迟（FID）等关键指标。交互响应则关乎用户点击按钮后的等待时间，以及页面元素的可交互性。视觉流畅度则体现在动画的平滑度、滚动时的卡顿感等。 性能对用户和业务的影响： 分析低性能对用户留存、转化率、品牌形象以及SEO排名的负面影响，并通过真实案例说明性能提升带来的显著业务收益。 性能的权衡与优先级： 讨论在资源有限的情况下，如何根据业务需求和用户场景，确定性能优化的优先级，实现投入产出比的最大化。例如，对于内容型网站，首屏加载速度可能更为关键；而对于交互复杂的应用，响应速度则至关重要。 第二章：性能测量工具与方法 浏览器开发者工具深度解析： 详细介绍Chrome、Firefox等主流浏览器的开发者工具（DevTools）中的Performance、Network、Lighthouse等模块。 Performance Tab： 如何分析CPU使用情况、JavaScript执行时间、渲染流水线（Layout, Paint, Composite）等，识别卡顿和耗时操作。我们将学习如何解读火焰图（Flame Chart）、时间线（Timeline）以及事件日志，找出性能瓶颈的根本原因。 Network Tab： 理解HTTP请求的生命周期，分析资源下载顺序、大小、缓存策略、请求头和响应头信息，找出网络传输中的低效之处。我们将关注请求的Waterfall（瀑布图）以及各种网络状态码的含义。 Lighthouse Auditor： 介绍Lighthouse这一强大的自动化性能检测工具，学会分析其生成的报告，包括性能得分、最佳实践、可访问性和SEO建议，并理解各项指标的评分标准。 第三方性能监控工具： 介绍Google Analytics (GA)、Google Search Console、WebPageTest、GTmetrix等常用第三方工具，以及它们在真实用户监控（RUM）和实验室测试中的作用。 性能指标详解： 深入理解核心Web指标（Core Web Vitals）：LCP（Largest Contentful Paint）、FID（First Input Delay）、CLS（Cumulative Layout Shift）。以及其他重要指标如FCP（First Contentful Paint）、TTFB（Time to First Byte）、DCL（DOMContentLoaded）、Load等，并学习如何解读它们。 性能测试环境的搭建与考虑： 讨论如何在不同的网络条件（4G、5G、WiFi）、不同设备（PC、移动端）以及不同浏览器下进行准确的性能测试，模拟真实用户的使用场景。 第二部分：网络传输优化——加速资源抵达 网络是前端性能的咽喉，优化网络传输是提升性能最直接有效的手段之一。本部分将聚焦于网络层面的优化。 第三章：HTTP协议与协议优化 HTTP/1.1的局限性： 深入分析HTTP/1.1的队头阻塞（Head-of-Line Blocking）问题，以及多TCP连接带来的开销。 HTTP/2的优势与应用： 讲解HTTP/2的多路复用（Multiplexing）、头部压缩（HPACK）、服务器推送（Server Push）等特性，以及如何在实际项目中应用HTTP/2。 HTTP/3与QUIC： 简要介绍HTTP/3及其基于QUIC协议的优势，为未来的网络发展做好铺垫。 TLS/SSL优化： 讨论HTTPS对性能的影响，以及如何通过TLS会话复用、TLS票据等技术来减少握手延迟。 第四章：资源压缩与编码 文本文件压缩： 讲解Gzip、Brotli等压缩算法的原理和应用。如何配置服务器启用它们，以及在客户端如何识别和处理压缩资源。 图片优化： 图片格式选择： JPEG, PNG, GIF, WebP, AVIF等格式的特性、适用场景以及各自的优劣势。 图片压缩技术： 有损压缩与无损压缩。介绍使用工具（如ImageOptim, TinyPNG）或自动化构建流程进行图片压缩。 响应式图片： ``元素和`srcset`/`sizes`属性的应用，根据不同屏幕尺寸和分辨率加载最优的图片。 懒加载（Lazy Loading）： 针对图片和 iframe 等非关键资源，实现按需加载，提升首屏加载速度。 字体优化： 字体格式： WOFF, WOFF2, EOT, TTF等，了解其兼容性和压缩率。 字体子集化： 只加载项目中实际用到的字符，显著减小字体文件大小。 字体加载策略： `font-display`属性的应用，控制字体加载过程中的文本显示策略（如swap, fallback, optional），避免“无样式闪烁”（FOUT）和“闪烁的文本”（FOIT）。 第五章：缓存策略与CDN应用 浏览器缓存： 深入理解HTTP缓存机制，包括Cache-Control, Expires, ETag, Last-Modified等请求头和响应头。如何设置合理的缓存策略，减少重复请求。 Service Worker： 介绍Service Worker作为客户端代理，实现离线访问、网络请求拦截、缓存管理等高级功能，进一步提升性能和用户体验。 CDN（内容分发网络）： 讲解CDN的原理、工作模式以及选择合适的CDN服务商。如何利用CDN加速静态资源的全球分发，缩短用户访问延迟。 预连接与预获取： `dns-prefetch`, `preconnect`, `prefetch`, `prerender`等资源提示（Resource Hints）的应用，提前建立连接或下载资源，为后续操作做好准备。 第三部分：渲染性能优化——打造流畅视觉 前端渲染是用户感知性能的最直接环节。本部分将深入探讨如何优化页面的渲染过程。 第六章：HTML结构与DOM优化 精简HTML结构： 编写语义化、扁平化的HTML，减少不必要的嵌套层级，降低DOM解析和渲染的复杂度。 DOM操作的性能影响： 讲解JavaScript频繁、低效的DOM操作对渲染性能的巨大影响。 虚拟DOM与diff算法： 简要介绍React等框架中虚拟DOM的原理，以及diff算法如何高效地更新真实DOM，降低重排（Reflow）和重绘（Repaint）的频率。 DocumentFragment的应用： 讲解DocumentFragment如何批量操作DOM，减少对页面布局的影响。 第七章：CSS渲染优化 CSS加载与解析： 讨论CSS文件阻塞渲染的问题，以及如何通过`media`属性、异步加载CSS（如`rel="preload"`配合`onload`事件）来改善。 选择器性能： 避免使用低效的选择器（如通用选择器``、后代选择器嵌套层级过深），以及类选择器与ID选择器的性能差异。 CSSOM（CSS Object Model）： 了解CSSOM的构建过程，以及它与DOM树的结合如何影响渲染。 避免重排（Reflow）与重绘（Repaint）： 详细讲解哪些CSS属性会触发重排和重绘，以及如何通过批量修改样式、使用`transform`和`opacity`等CSS属性来优化动画和布局变化。 CSS Modules与CSS-in-JS的性能考量： 分析这些方案在性能方面的优缺点，以及如何进行优化。 第八章：JavaScript执行优化 JavaScript的阻塞性： 讲解`