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