本書的主要內容有:深入理解React的核心原理和工作機制。學會編寫高質量的React應用并掌握持續(xù)優(yōu)化的方法。掌握構建高可用、可擴展React應用的關鍵技巧。靈活運用React高級功能,例如reducers、state和refs等。
編輯推薦
React通過聲明式抽象構建Web應用,為開發(fā)者提供卓越的開發(fā)體驗。本書將幫助你深入理解React的核心概念,包括JSX語法及其高級設計模式、虛擬DOM、React協調機制以及性能優(yōu)化等關鍵技術。掌握這些知識后,你將能夠更加高效地構建高質量的Web 應用。
本書的作者以通俗易懂的語言講解React的底層原理,摒棄晦澀難懂的術語,讓你更輕松地理解其運行機制。通過剖析React的細節(jié)和架構,你將掌握靈活操控React代碼的能力,從而達到全新的高度。
專家推薦
Carl Sagan說,你必須先了解過去,才能理解當下。在本書中,Tejas帶領我們回顧了React的前世今生,在我看來,這本書正是Tejas在前端領域對這一理念的完美踐行,他帶領我們回顧React的發(fā)展歷程,讓讀者深入理解其歷史脈絡。
他細致入微地剖析了協調和Fiber等核心概念。如果你渴望深入理解React及其不斷演進的生態(tài),那么這本書絕對不容錯過。
Matheus Albuquerque Brasil
Google Web技術專家
前言本書并不適用想要學習如何使用React 的讀者。如果你對React 還不熟悉,并希望找到一份入門教程,可以從react.dev 上的React 官方文檔開始。相反,本書是為那些由好奇心驅使的人而寫,他們并不滿足于了解如何使用React,而是更想弄清楚React 的工作原理。在本書中,我們將深入探討多個React 的核心概念,理解其底層機制,并探索這些機制是如何協同工作的,使我們能夠更加高效地開發(fā)React 應用。通過探究React 的內部原理,我們將建立一套清晰的思維模型,使我們能夠更加準確地理解React 及其生態(tài)系統(tǒng)。本書假設讀者已經具備以下基礎知識:瀏覽器渲染網頁的基本原理。網頁是由CSS 樣式化的HTML 文檔,并通過JavaScript 實現交互性。此外,本書還假設讀者對React 有一定的了解,并且曾經開發(fā)過一兩個React 應用,最好其中一些應用已經投入生產環(huán)境使用。我們將從React 的概述及其發(fā)展歷史入手,回顧2013 年它以開源軟件的形式首次發(fā)布的背景。隨后,我們將深入剖析React 的核心概念,包括組件模型、虛擬DOM 和協調(reconciliation)機制。接著,我們會探討JSX 的編譯原理,并深入解析React 的Fiber 架構,理解其并發(fā)編程模型。通過這些內容,我們將掌握一些關鍵技巧,比如更高效地進行記憶化,以及使用諸如React.memo和useTransition 這樣的強大原語,延遲渲染不必要的計算任務。本書的后半部分,我們將深入探討React 框架:了解它們所要解決的問題,以及它們是如何解決這些問題的。為了更好地理解這些機制。我們將親手編寫一個框架,聚焦于Web 應用繞不開的三個關鍵問題:服務端渲染、路由和數據獲取。當親手解決了這些問題后,我們會更加直觀和透徹地感受現有框架解決它們的思路。此外,我們還將深入研究React 服務端組件(RSC)和服務端操作(server actions),并探討下一代前端工具鏈,例如打包工具(bundlers)和同構路由(isomorphic routers)等。最后,我們將視角從React 拓展到更廣闊的前端生態(tài),探討Vue、Solid、Angular、Qwik 等競品。我們將重點探索信號(Signal)及其細粒度響應式(fine-grained reactivity),并和React 更粗粒度的響應式模型進行對比。此外,我們還會探討React 對信號機制的回應:Forget 工具鏈,以及它在與信號機制對比中的表現。本書內容豐富,值得深入探究,所以不浪費時間了,讓我們開始吧!本書中的約定本書采用以下排版約定:斜體(Italic)用于表示新術語、網址(URL)、電子郵件地址、文件名和文件擴展名。等寬字體(Constant width)用于代碼示例,以及在正文中引用的程序元素,例如變量、函數名、數據庫名稱、數據類型、環(huán)境變量、語句和關鍵字等。等寬加粗字體和淺灰色文本(Constant width bold and light gray text)僅用于印刷版第10 章,用于在代碼塊中突出代碼差異。OReilly 在線學習平臺(OReilly Online Learning)近40 年來,OReilly Media 致力于提供技術和商業(yè)培訓、知識和卓越見解,來幫助眾多公司取得成功。公司獨有的專家和改革創(chuàng)新者網絡通過OReilly 書籍、文章以及在線學習平臺,分享他們的專業(yè)知識和實踐經驗。OReilly 在線學習平臺按照您的需要提供實時培訓課程、深入學習渠道、交互式編程環(huán)境以及來自OReilly 和其他200 多家出版商的大量書籍與視頻資料。更多信息,請訪問網站:https://www.oreilly.com/。聯系我們任何有關本書的意見或疑問,請按照以下地址聯系出版社。美國:OReilly Media, Inc.1005 Gravenstein Highway NorthSebastopol, CA 95472中國:北京市西城區(qū)西直門南大街2 號成銘大廈C 座807 室(100035)奧萊利技術咨詢(北京)有限公司本書有專門的網頁,其中列出了勘誤信息、示例代碼及其他相關資料,可以訪問以下鏈接獲取更多信息:https://oreil.ly/fluent-react。對本書中文版的有任何建議可以發(fā)電子郵件到errata@oreilly.com.cn。欲了解本社圖書和課程的新聞和信息,請訪問我們的網站http://oreilly.com。我們的Facebook:http://facebook.com/oreilly。我們的Twitter:http://twitter.com/oreillymedia。我們的YouTube:https://youtube.com/oreillymedia。致謝這是我人生中撰寫的第一本書,而我并非孤軍奮戰(zhàn),對此我無比感激。你即將閱讀的內容,凝聚了許多才華橫溢之人的智慧和努力。正是他們的付出,才讓這本書得以問世。在此,我衷心感謝他們?yōu)楸緯龀龅呢暙I。請不要跳過這一部分,因為這些人值得你的關注和感激。首先,我要感謝直接幫助我完成本書的人:? 首先要感謝我的妻子Lea。寫這本書占據了我大量時間,犧牲了本該與家人共度的時光。由于我對這個主題充滿熱情,并希望將其分享給大家,這本書甚至占用了部分假期和原本可以與妻子相處的機會。然而,Lea 始終給予我無限的支持和鼓勵,我對此滿懷感激。? 本書的開發(fā)編輯Shira Evans,來自OReilly 的Shira 是一位非常棒的合作伙伴,她始終支持、鼓勵并理解我,即使在面對諸多延誤時仍不放棄。由于React 生態(tài)持續(xù)演進,例如Forget 和服務端操作的引入,我們需要不斷調整內容,而Shira 始終耐心陪伴、支持著我。對此,我感激不盡。? 我的良師益友Kent C. Dodds(@kentcdodds),他不僅在本書之外給予我長期的指導,還為本書撰寫了序言。多年來,Kent 一直是我值得信賴的朋友和導師,我由衷感謝他一直以來的支持和鼓勵。? 審閱團隊。如果沒有這些審閱人員的細致入微與專業(yè)精神,這本書絕不可能完成。他們與我并肩作戰(zhàn),傾注了大量心血,我在此深表謝意:─ Adam Rackis (@adamrackis)─ Daniel Afonso (@danieljcafonso)─ Fabien Bernard (@fabien0102)─ Kent C. Dodds (@kentcdodds)─ Mark Erikson (@acemarke)─ Lenz Weber-Tronic (@phry)─ Rick Hanlon II (@rickhanlonii)─ Sergeii Kirianov (@SergiiKirianov)─ Matheus Albuquerque (@ythecombinator)? Meta(原Facebook)的React 團隊,感謝他們不懈推動React 的發(fā)展,不斷突破技術邊界,以卓越的工程能力和創(chuàng)新思維,讓React 變得更加強大且易用。特別感謝Dan Abramov(@dan_abramov),他不僅耐心向我講解了打包工具在React 服務端組件架構中的作用,還貢獻了第9 章關于React服務端組件的重要內容。最后,我要感謝你,作為讀者,愿意閱讀這本書并對其內容產生興趣。我希望你在閱讀過程中收獲滿滿,就像我在寫作這本書時所感受到的喜悅與成長。
Tejas Kumar自2014年起開始編寫React代碼,并在多個會議、研討會和客座講座中分享相關知識。他在多家初創(chuàng)企業(yè)中積累了豐富的技術經驗,并對React的核心概念有著深刻的理解。他熱衷于React布道,樂于幫助他人掌握React的開發(fā)技巧,賦能他們流暢地構建React應用。
目錄
序 1
前言 3
第1 章 基礎知識 9
1.1 為什么React 會誕生9
1.2 React 誕生之前 10
1.2.1 jQuery 20
1.2.2 Backbone .23
1.2.3 KnockoutJS 30
1.2.4 AngularJS 35
1.3 進入React 時代 .40
1.3.1 React 的價值主張 42
1.3.2 React 的發(fā)布 .48
1.3.3 Flux 架構 .49
1.3.4 Flux 架構的優(yōu)勢 .51
1.4 總結:為什么React 如此流行 52
1.5 本章小結53
1.6 回顧問題53
1.7 接下來的內容 .53
第2 章 JSX .55
2.1 JavaScript XML .55
2.2 JSX 的優(yōu)點 58
2.3 JSX 的缺點 59
2.4 深入解析60
2.4.1 代碼是如何工作的 .61
2.4.2 使用JSX 擴展JavaScript 語法 .65
2.5 JSX 編譯指示 .67
2.6 表達式 68
2.7 本章小結69
2.8 回顧問題69
2.9 接下來的內容 .69
第3 章 虛擬DOM .71
3.1 虛擬DOM 概述 .71
3.2 真實DOM 73
3.2.1 操作真實DOM 的風險 78
3.2.2 文檔片段 .87
3.3 虛擬DOM 的工作原理 89
3.3.1 React 元素 89
3.3.2 虛擬DOM vs 真實DOM 94
3.3.3 高效更新 .97
3.4 本章小結99
3.5 回顧問題.100
3.6 接下來的內容 101
第4 章 深入解析協調過程 103
4.1 理解協調過程 103
4.2 批量更新.106
4.3 先例 107
4.4 Fiber 協調器 . 111
4.4.1 Fiber 數據結構 111
4.4.2 雙緩沖 114
4.4.3 Fiber 協調 . 115
4.5 本章小結.122
4.6 回顧問題.122
4.7 接下來的內容 123
第5 章 常見問題與有效的模式 . 125
5.1 使用React.memo 實現記憶化 .125
5.1.1 React.memo .129
5.1.2 記憶化的組件仍會重新渲染 130
5.1.3 這是一種指導原則,而非規(guī)則 134
5.2 使用useMemo 進行記憶化140
5.2.1 使用useMemo 的注意事項 .142
5.2.2 忘記一切 .150
5.3 懶加載 .150
5.4 useState 與useReducer 157
5.5 強大的設計模式 .164
5.5.1 展示組件/ 容器組件模式 .165
5.5.2 高階組件 166
5.5.3 Render Props 模式 175
5.5.4 Control Props 模式 177
5.5.5 屬性集合模式 .179
5.5.6 組合組件模式 .182
5.5.7 狀態(tài)Reducer 模式 186
5.6 本章小結.189
5.7 回顧問題.189
5.8 接下來的內容 190
第6 章 服務端渲染 191
6.1 客戶端渲染的限制 .191
6.1.1 搜索引擎優(yōu)化(SEO) .191
6.1.2 性能 .193
6.1.3 安全性 196
6.2 服務端渲染的興起 .198
6.3 客戶端激活(Hydration) .199
6.4 使用服務端渲染 .202
6.4.1 手動為React 應用添加服務端渲染能力 202
6.4.2 客戶端激活 .205
6.5 服務端渲染相關的API 205
6.5.1 renderToString 206
6.5.2 renderToPipeableStream 209
6.5.3 renderToReadableStream 222
6.5.4 應用場景 224
6.6 避免重復造輪子 .226
6.7 本章小結.229
6.8 回顧問題.229
6.9 接下來的內容 230
第7 章 React 并發(fā)模式 231
7.1 同步渲染的問題 .232
7.2 重新審視Fiber 233
7.3 調度和延遲更新 .233
7.4 深入探討.237
7.5 渲染通道.242
7.5.1 渲染通道的工作原理244
7.5.2 處理通道 245
7.5.3 提交階段 246
7.6 useTransition .247
7.6.1 簡單示例 247
7.6.2 高級示例:頁面導航248
7.6.3 深入探討 250
7.7 useDeferredValue 251
7.7.1 useDeferredValue 的設計目的 252
7.7.2 什么時候使用useDeferredValue 255
7.7.3 什么時候不適合使用useDeferredValue 256
7.8 并發(fā)渲染的問題 .257
7.9 本章小結.267
7.10 回顧問題 268
7.11 接下來的內容 269
第8 章 框架 . 271
8.1 為什么需要框架 .271
8.1.1 服務端渲染 .275
8.1.2 路由 .277
8.1.3 數據獲取 278
8.2 使用框架的優(yōu)勢 .283
8.3 使用框架的顧慮 .284
8.4 流行的React 框架 .285
8.4.1 Remix .285
8.4.2 Next.js 295
8.5 如何選擇合適的框架 304
8.5.1 明確項目需求 .305
8.5.2 Next.js 305
8.5.3 Remix .306
8.5.4 權衡取舍 307
8.5.5 開發(fā)者體驗 .308
8.5.6 運行時性能 .308
8.6 本章小結.310
8.7 回顧問題.310
8.8 接下來的內容 311
第9 章 React 服務端組件 313
9.1 服務端組件的優(yōu)勢 .315
9.2 服務端渲染 315
9.2.1 深入剖析 318
9.2.2 處理組件更新 .329
9.2.3 細節(jié)剖析 335
9.3 服務端組件的使用準則 337
9.3.1 序列化是關鍵 .337
9.3.2 避免使用具有副作用的Hooks 337
9.3.3 服務端狀態(tài)客戶端狀態(tài) 338
9.3.4 客戶端組件不能引用服務端組件 .338
9.3.5 客戶端組件尚未過時340
.4 服務端操作 340
9.4.1 表單與數據變更 341
9.4.2 非表單場景 .341
9.5 展望React 服務端組件的未來 .342
9.6 本章小結.343
9.7 回顧問題.344
9.8 接下來的內容 344
第10 章 React 的競品 . 347
10.1 Vue.js .347
10.1.1 信號 349
10.1.2 易于上手 350
10.2 Angular .350
10.2.1 變更檢測 351
10.2.2 信號 351
10.3 Svelte .352
10.4 Solid 357
10.5 Qwik 359
10.6 共性的設計模式 361
10.6.1 基于組件的構架設計 361
10.6.2 聲明式語法361
10.6.3 響應狀態(tài)更新 362
10.6.4 生命周期方法 362
10.6.5 社區(qū)和工具362
10.7 React 并非真正的響應式框架 363
10.8 React 的未來 368
10.9 本章小結 372
10.10 回顧問題 373
10.11 接下來的內容 .374
第11 章 總結 375
11.1 要點總結 375
11.2 我們的時間線 378
11.3 魔法背后的機制 .378
11.4 深入探索的旅程 379
11.5 保持更新 380