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的阻塞性： 講解`